javascript - 当新 SVG 替换原始 SVG 时，SVG 元素上的 $.bind() 中断

Question

我有一个 svg，其中包含我绑定(bind)到点击和键盘输入的元素。如果用户编辑页面上的文本字段，它会更新 svg 中相应的文本元素。反之亦然，如果用户编辑 svg，它会更新 html 中相应的文本字段。使用 jQuery。

页面上的按钮允许用户从 DOM 中删除 svg 并在其位置添加不同的 svg(异步)。这个新的 svg 具有与第一个相同的元素，只是具有不同的图形设计。

加载第二个 svg 后，绑定(bind)停止工作。我通过调用下面的 AB.init() 重新初始化所有内容——解除绑定(bind)和重新绑定(bind)，但用户仍然无法编辑 svg。我该如何解决这个问题？

更新:根据@Pointy 的评论，所有 .bind()s 现在都是 .delegate()s。但是问题仍然存在。我的 .delegate() 语法对命名空间有效吗？

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

试试 .live()

它将事件绑定(bind)到现在和将来匹配选择器的元素。动态隐藏和显示元素时，我遇到过类似的问题。 jQuery Live()