Question

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?

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[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() {
    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;
}
  },
  ...

Answer 1

Try .live()

It will bind events to elements that match a selector now and in the future. I have had similar issues when dynamically hiding and showing elements.
jQuery Live()