0

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

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

我的示例代码如下：

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

fayls我的桌子的ID在哪里。

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

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

谢谢。

4

3 回答 3

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小提琴

它按预期工作（每次单击按钮都会将一个<p>元素添加到两个 div 中）。

现在让我们稍微改变一下我们的 HTML：

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

JS小提琴

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

另请注意，DOMNodeInserted 事件现在被认为已弃用（但在 IE9 中它的支持仍然存在缺陷，如此处所述）。

于 2012-12-20T19:28:06.437 回答
1

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

来自 W3C

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

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

绑定事件使用：

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

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

$('#something').trigger('row.added');
于 2012-12-20T19:43:25.760 回答
0

正如你们都提到的，问题是由选择引起的，对于选择的每个下拉框项目，它都会触发 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)
        }
    });

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

于 2012-12-24T13:36:23.663 回答