javascript - 静态表更改的 DOM 监听器

Question

我正在尝试将监听器添加到我的表中，以便调用另一个 jJavascript 函数。

我的应用程序是一个简单的上传脚本，当用户选择一个文件时，它会上传并在表中创建新行。因此，在每次创建新行时，我想调用一个 Javascript 函数。

我的示例代码如下:

$("#fayls").bind("DOMNodeInserted", function() {
    $(".chzn-select").chosen();
    alert('ha cambiato')
});

其中 fayls 是我的表的 ID。

当我运行这段代码时，它会无限地调用该事件，而不是一次。

我该如何解决这个问题？

谢谢。

Answer 1

我认为问题在于选择的插件将容器内的元素与 "#fayls" 进行转换。 ID。考虑一下:

HTML:

<div id="something"></div>
<div id="completely_different"></div>
<button id="change_something" type="button">Change!</button>

JS:

$('#change_something').click(function() {
    $('#something').append($('<p>Internal P</p>'));
});
$('#something').bind("DOMNodeInserted", function(event) {
    alert(event.target);
    $("#completely_different").append($('<p>SOme p</p>'));
});

JS Fiddle

它按预期工作(每次单击按钮都会在两个 div 中添加 <p> 元素)。

现在让我们稍微更改一下 HTML:

<div id="something">
    <div id="completely_different"></div>
</div>
<button id="change_something" type="button">Change!</button>

JS Fiddle

...现在该事件将无限期地触发 - 因为当我们更新内部 div 时，DOMNodeInserted 仍然会冒泡到外部 div。

另请注意，DOMNodeInserted 事件被视为 deprecated现在(但 IE9 中的支持仍然存在问题，如 here 所述)。