jQuery：觀察可枚舉/選擇器

使用$("#myTable tr").live("click", someCallback);（儘管現在已被棄用），訂閱新添加的表格行的單擊事件非常簡單。jQuery：觀察可枚舉/選擇器

我有興趣在不唯一支持的事件，但任何jQuery的命令，像一個辦法：

$("myTable tr").live().attr("hello", "world");

這將問候=「世界」的屬性添加到任何新添加的錶行。 jQuery中有這樣的事情嗎？

更新：請注意。我想訂閱到元素被添加的事件。我做不是控制添加它的代碼。以dataTables爲例：dataTables插件創建表格行。

來源

2011-11-14 chiccodoro

檢出http://stackoverflow.com/questions/7692730/dom-mutation-event-in-jquery-or-vanilla-javscript/7749629#7749629 –

我想說這有兩個原因並不存在。

DOM修改事件不被廣泛支持。您可以在Chrome和FF中偵聽DOMSubtreeModified，但不能在IE和Opera中偵聽。
根據選擇器檢查每個DOM事件將會非常昂貴。 .live/.delegate已經非常低效。

爲了幫助圖片2，想象1不是問題，我們可以捕獲元素添加到DOM的任何時間。發生這種情況時，我們需要根據"#myTable tr"評估新元素及其子元素。這將顯着增加非本地代碼執行的數量，每每 DOM的範圍變化，真的放慢速度。

最好的策略是如果你沒有選擇和只支持Chrome和FF添加所需的jQuery對代碼的更改將被插入<tr>

UPDATE，有一個解決方案我能想到。顯然，它不會那麼快，你可以提高通過特異性的表現：

$.fn.elementInserted = function(pattern, fn) { 
    return this.bind('DOMNodeInserted', function(event) { 
      if (event.target.nodeType != 1) return; 
      $(event.target).filter(pattern).each(fn); 
    }); 
}; 

/* SLOW */ $(document).elementInserted('#myTable tr', function(){$(this).attr('hello', 'world');}); 
/* FASTER */ $('#myTable').elementInserted('tr', function(){$(this).attr('hello', 'world');});

在這裏看到一個例子：http://jsfiddle.net/vCZHQ/

理論上你可以檢查表已經做了超時在IE改變：

var oldEls = $('#myTable tr'); 
setInterval(function() { 
    var newEls = $('#myTable tr'); 
    if(oldEls.length < newEls.length) { 
     /* Do code here to figure out who is new and apply changes. */ 
    } 
    oldEls = newEls; 
}, 50);

這就是說，這會稍微延遲，真的會耗盡筆記本電腦的電池。

來源

2011-11-14 15:10:58

謝謝。我明白你的觀點。不幸的是添加行的代碼不是由我自己決定的。我相應地更新了我的問題。 – chiccodoro

感謝您的精心編輯。很遺憾IE不支持這個事件... – chiccodoro

我想你應該添加代碼，將hello屬性添加到回調函數中的行或實際將行添加到表中的語句上。

來源

2011-11-14 14:59:42

我已更新我的問題。不幸的是添加行的代碼不是由我自己決定的。 – chiccodoro

jQuery：觀察可枚舉/選擇器

回答

相關問題