静态表更改上的 DOM 侦听器答案

【问题标题】：DOM Listener on Static Table Change静态表更改上的 DOM 侦听器
【发布时间】：2012-12-20 19:11:30
【问题描述】：

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

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

我的示例代码如下：

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

fayls 是我的表的 ID。

当我运行此代码时，它会无限调用此事件，而不仅仅是一个。

我应该如何解决这个问题？

谢谢。

【问题讨论】：

插入的行是否包含那些被选择转换的元素？
对不起，我不明白你的问题：/
choice() 是做什么的？如果你把它注释掉会发生什么
对于每个上传的元素，我希望用户从下拉菜单中选择标签。对于我使用的那个菜单，harvesthq.github.com/chosen 以获得更好的 UI。因此我需要调用 selected() 函数来改善下拉菜单的视图

标签： javascript dom events listener dom-events

【解决方案1】：

我认为问题在于，Chosen 插件会转换该容器内具有"#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 仍然会冒泡到外部。

还请注意，DOMNodeInserted 事件现在被认为是 deprecated（但它在 IE9 中的支持仍然存在缺陷，如 here 所述）。

【讨论】：

是的，你完全正确。当我停用选择时，一切正常。但是，无论如何可以用 selected 来做这个？我可以在我的表中添加任何监听器，让我知道何时添加了新的 TR 或其他什么？
不如将监听器附加到上？无论如何，我建议完全摆脱 MutatorEvent 处理程序，而是在您的 AJAX 响应处理器中触发自定义事件。您可以安全地监听该事件。
我明白了。。有没有关于自定义事件创建的好文章或教程？
检查this one。但实际上，使用.bind 和.trigger 非常简单。

【解决方案2】：

您遇到了问题，因为事件也会在父节点（气泡）处分派

来自 W3C

DOMNode 插入： - 当一个节点被添加为另一个节点的子节点时触发。 - 在插入发生后调度此事件。
- 这个事件的目标是被插入的节点。气泡：是的 - 可取消：否 - 上下文信息：relatedNode 持有父节点

尝试在添加行并绑定它以更新组合框时调度自定义事件

绑定事件使用：

$('#something').bind('row.added', function(event) {
    event.stopPropagation();
    //your code here
}

触发事件（添加行后）使用：

$('#something').trigger('row.added');

【讨论】：

是的，这就是我要找的，有没有关于调度自定义事件的教程或文章？
我根据您的示例更新了我的代码，但现在没有触发事件，没有任何反应
@CanCeylan 你可以发布你的代码的 sn-p 或创建一个 jsfiddle 吗？