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

i have svg elements binding clicks , keyups. if user edits text field on page, updates corresponding text element in svg. , vice versa, if user edits svg, updates corresponding text field in html. using jquery.

a button on page lets user remove svg dom , add different svg in place (asynchronously). new svg has same elements first one, has different graphical design.

after loading second svg, bindings stop working. reinitialize -- unbinding , rebinding -- calling ab.init() below still user can't edit svg. how fix this?

update: .bind()s .delegate()s per @pointy's comment. problem persists. .delegate() syntax valid namespace?

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; < length; i++) {       var e = svg_text_elements[i];       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() {     = [];     $.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; }   },   ... 

try .live()

it bind events elements match selector , in future. have had similar issues when dynamically hiding , showing elements. jquery live()