Question

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

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

我的示例代码如下：

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

fayls是我桌子的名字。

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

我该如何解决这个问题？

感谢。

Answer 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仍会冒泡到外部div。

另请注意，DOMNodeInserted事件现在被视为deprecated（但仍然支持IE9中的错误，如here所述）。

Answer 2

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

分派

来自W3C

DOMNodeInserted： - 将节点添加为另一个节点的子节点时触发。 - 插入后发送此事件 - 此事件的目标是正在插入的节点。 - 泡泡：是的 - 可取消：否 - 上下文信息：relatedNode保存父节点

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

绑定事件使用：

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

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

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

Answer 3

正如大家所提到的，问题是由选择引起的，对于所选的每个drop box项，它会触发DOM事件，因此我将有无限循环。

我通过过滤不必要的事件找到了一个简单的解决方案：

 $("#listenMe").bind("DOMNodeInserted", function(event) {

        var targetName =  event.target.nodeName.toString() ;
        if (targetName == "TR") {
            $(".chzn-select").chosen();
            //alert('ha cambiato - Event Node Name:' + event.target.nodeName)
        }
    });

因此，它仅在将新行添加到表中时运行

静态表更改的DOM侦听器

3 个答案: