靜態表更改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監聽器

回答

相關問題