$.bind() on SVG elements breaks when new SVG replaces original

[GeN/]

I have an svg with elements that I am binding to clicks and keyups. If the user edits a text field on the page, it updates the corresponding text element in the svg. And vice versa, if the user edits the svg, it updates the corresponding text field in the html. Using jQuery.A button on the page lets the user remove the svg from the DOM and add a different svg in its place (asynchronously). This new svg has the same elements as the first one, it just has a different graphical design.After loading this second svg, the bindings stop working. I reinitialize everything -- unbinding and rebinding -- by calling AB.init() below but still the user can't edit the svg. How do I fix this?UPDATE: all .bind()s are now .delegate()s per @Pointy's comment. However the problem persists. Is my .delegate() syntax valid for the namespace?\[code\]AB = { svgns: "http://www.w3.org/2000/svg" f: { field1: {svg:null, jq:null}, field2: {svg:null, jq:null} }, /* last activated text field */ active: undefined, init: function() { AB.f.field1.jq = $('#id_field_1'); AB.f.field2.jq = $('#id_field_2'); var svg_container = document.getElementById('svg_container'); var svg_text_elements = svg_container.getElementsByTagNameNS(svgns, 'text'); var length = svg_text_elements.length; for(var i=0; i < length; i++) { var e = svg_text_elements; if(e.id) { AB.set_svg_for_text_field(e); } else { var tspans = e.getElementsByTagName('tspan'); for(var j = 0; j < tspans.length; j++) { var t = tspans[j]; AB.set_svg_for_text_field(t); } } } AB.delegate_and_display_text_fields(); }, delegate_and_display_text_fields: function() { a = []; $.each(AB.f, function(key, value) { if(value.svg && value.jq){ $('form').delegate('input', 'keyup click', function() { value.svg.textContent = value.jq.val(); CB.set_active_element(key); CB.active = value; }); $('#svg_container svg').delegate('text', 'keyup click', function() { value.svg.textContent = value.jq.val(); CB.set_active_element(key); CB.active = value; }); if(value.jq.val()) { value.svg.textContent = value.jq.val(); } a.push(value); value.jq.parent().fadeIn(); } }); }, set_svg_for_text_field: function(e) { switch(e.id) { case "field_1": AB.f.field1.svg = e; break; case "field_2": AB.f.field2.svg = e; break;} }, ...\[/code\]