静态表更改DOM监听器

我想添加监听器到我的表以调用另一个JavaScript函数。静态表更改DOM监听器

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

我的示例代码如下：

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

哪里fayls是我的表的ID。

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

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

谢谢。

来源

2012-12-20 CanCeylan

运行是否插入的行包含这些元素通过选择转换的α – raina77ow

对不起，但我不明白你的问题：/ – CanCeylan

选择（）做什么？如果您将其注释掉，会发生什么 – ama2

正如你所提到的，这个问题是由选择引起的，对于选中的每个下拉框项目，它都会触发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-24 13:36:23 CanCeylan

我认为问题在于选择的插件将所有容器中的元素与"#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

它将按预期工作（每按一下按钮添加一个<p>元素插入boths的div）。

现在让我们稍微改变我们的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中的bug，如here所述）。

来源

2012-12-20 19:28:06 raina77ow

是的，你是绝对正确的。当我停用选择时，一切都很完美。然而，无论如何，选择这个呢？我可以添加任何听众到我的表，让我知道什么时候添加新TR或其他？ – CanCeylan

如何将聆听者连接到而不是？无论如何，我建议完全摆脱MutatorEvent处理程序，而不是触发AJAX响应处理器中的自定义事件。您可以安全地听取该事件。 – raina77ow

我明白了。是否有任何关于自定义事件创建的好文章或教程？ – CanCeylan

你有问题，因为该事件将在父节点也出动（气泡）

从W3C

DOMNodeInserted： - 当一个节点已作为另一个孩子被解雇节点。 - 插入后发送此事件。
- 此事件的目标是要插入的节点。 - 泡泡：是 - 可取消：没有 - 上下文信息：relatedNode持有父节点

尝试在添加该行并将其绑定用于更新的组合框

绑定事件派遣一个自定义事件使用方法：

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

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

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

来源

2012-12-20 19:43:25 joeyramone76

是的，这就是我正在寻找的，有没有关于派遣自定义事件的任何教程或文章？ – CanCeylan

@CanCeylan我编辑了我的答案 – joeyramone76

我更新了我的代码相对于你的例子，但现在事件没有被解雇，没有任何反应 – CanCeylan

静态表更改DOM监听器

回答

相关问题