javascript - 为什么重命名 HTML 元素会删除其事件？

Question

我注意到，当我通过 JavaScript 更改表单元素的 ID 或名称时，与其关联的 jQuery 事件不再存在。我已经在 Firefox 17 和 IE 10 上尝试过此操作。这是设计使然吗？如果是这样，有什么办法可以预防吗？

更新:请检查 http://jsfiddle.net/qHH7P/2/举个例子。

我正在添加按钮以通过 jQuery 删除行。当我删除第一行时，我为第二行中的元素指定了新名称和 ID。然后，剩余行的删除按钮不再触发该事件。我需要重命名元素，因为 ASP.NET MVC 在绑定(bind)时期望对象集合有特定的命名约定。这就是为什么我需要用“0”而不是“1”重命名它们。我正在重命名

var regexpattern = new RegExp("WorkspaceQuestionSets\\[.+\\]", "g");
$(this).html($(this).html().replace(regexpattern, "WorkspaceQuestionSets[" + index + "]"));
var regexpattern = new RegExp("WorkspaceQuestionSets_.+__", "g");
$(this).html($(this).html().replace(regexpattern, "WorkspaceQuestionSets_" + index + "__"));

我刚刚意识到我什至没有重命名按钮。因此，事件消失就更没有意义了。但如果我注释掉代码来重命名元素，该事件仍然存在。

Answer 1

您正在重写 HTML。 .html() 返回一个字符串，然后您可以对其进行修改并再次设置。浏览器将解析该 HTML 字符串并从中创建新的 DOM 元素。在此过程中，您会破坏 DOM 元素，从而释放之前绑定(bind)到它们的事件处理程序。

I just realized that I'm not even renaming the buttons. So it makes even less sense that the event is gone.

无论您是否修改了其 HTML 表示形式，您都将销毁并重新创建 this 内的每个元素(我假设为每一行)。

<小时/>

你必须有可能解决这个问题:

1. 使用事件委托(delegate):不要将事件处理程序直接绑定(bind)到元素，而是将它们绑定(bind)到始终存在的祖先。在 .on *^[docs] 中了解有关事件委托(delegate)的更多信息文档，直接事件和委托(delegate)事件部分。

2. 不要重写 HTML。选择要修改其name属性的元素并修改它。例如:

   var name_exp1 = /WorkspaceQuestionSets\[.+\]/g;
   var name_exp2 = /WorkspaceQuestionSets_.+__/g;
   
   
   sourceEle.closest(".table").find(".row.set").each(function(index) {
       // Edit the name attribute of all `select` and `input` elements
       $(this).find('select, input').prop('name', function(i, name) {
           if (name_exp1.test(name)) {
               return name.replace(
                   name_exp1, 
                   "WorkspaceQuestionSets[" + index + "]"
               );
           }
           else if (name_exp2.test(name)) {
               return name.replace(
                   name_exp1, 
                   "WorkspaceQuestionSets_" + index + "__"
               );
           }
           return name;
       });
   });
   

在 JavaScript 中，忘记 HTML 并使用 DOM。