jQuery爲尚未添加到頁面的選擇器添加事件

我有一個<div>標記根據用戶變量添加到頁面中（我使用jquery append（）將其添加到頁面）jQuery爲尚未添加到頁面的選擇器添加事件

<div id="message"></div>

我想有這個div click事件，但我覺得我有，因爲DIV添加到頁面之前，我聽該事件的問題。

$(document).ready(function(){ 
    $('#message').click(function() { console.log('clicked'); // no console message? }; 
});

傳統，delegate()或live()不得不被用來實現這一目標。由於jQuery的1.7，然而，on()是首選：

$(document).on("click", "#message", function() { 
    console.log("clicked"); 
});

順便說一句，如果您的標記包含您的#message元素的非動態的祖先，這是更好地適用on()該元素，而不是出於性能方面的原因：

$("#non-dynamic-ancestor-of-message").on("click", "#message", function() { 
    console.log("clicked"); 
});

2012-01-25 15:42:47

您可以委派事件處理或事件處理程序添加到元素之前它被添加到DOM：

$(document).on('click', '#message', function() {...});

var $message = $('<div id="message" />').click(function() { console.log('clicked'); });

然後，每當你追加$message到DOM它會附加一個click事件處理程序：$('body').append($message);

注意.on() jQuery的1.7，在這種情況下，新的情況是一樣的使用.delegate() ，但.delegate()的參數排序略有不同。

2012-01-25 15:46:01 Jasper

回答