我使用Jquery創建一個元素，並給它的類.book：點擊jQuery的創建的元素上不工作

jQuery('<div/>', { 
    name: "my name", 
    class: 'book', 
    text: 'Bookmark', 
}).appendTo('body');

然後我想點擊該上課的時候做一些事情，所以很自然我寫了一個快速和易：

$('.book').click(function(){ 
    alert('I have been clicked'); 
});

這一工程

什麼行不通，就是如果我把它添加點擊這些元素。所以下面不工作：

var bms = 0; 
$('button').click(function(){ 
    bms += 1; 
    jQuery('<div/>', { 
     name: bms, 
     class: 'book', 
     text: 'Bookmark ' + bms 
    }).appendTo('body'); 
}); 
$('.book').click(function(){ 
    alert('I have been clicked'); 
});

爲什麼會發生這種情況，我怎麼能解決這個問題？

Jsfiddle

另一件事：

另外，如果我已經在我的身體類.book一個div，單擊事件將工作的那一個，但沒有任何附加的div s。 here is another jsfiddle to show that

來源

2013-07-24 Ryan Saxe

使用動態添加的元素查找事件處理。 –

當時'$（'。book'）。click（...'發生事件處理器分配，沒有'class =「book」'的DOM元素。請參閱@KyleK回答將事件分配給當前以及將來的物品 – Igor

你必須委託給新創建的元素，就像這樣......

只需更換這...

$('.book').click(function(){ 
    alert('I have been clicked'); 
});

有了這個....

$(document).on('click','.book', function(){ 
    alert('I have been clicked'); 
});

來源

2013-07-24 20:03:08 KyleK

完美，謝謝！ –

對不起，以前不讓我接受它，因爲它太早了，然後我不得不跑了一個差事 –

您的問題是您將事件附加到尚未準備好接收該事件的元素。您應該將事件附加到父元素，然後您可以篩選.book。這樣，當你的可點擊元素被添加時它並不重要，它可以工作。這被稱爲事件代表團。您正在將處理事件的任務委託給另一個元素。

HTML：

<body> 
    <button>Click here to add book.</button> 
</body>

而且你的JS：

$(document).on("click", ".book", function() { 
    alert('it works!'); 
}); 

var bms = 0; 
$('button').click(function(){ 
    bms += 1; 
    jQuery('<div/>', { 
     name: bms, 
     class: 'book', 
     text: 'Bookmark ' + bms 
    }).appendTo('body'); 
});

而且這樣做的時候，不要將它連接到父得太高了樹。您想將它附加到最近的可能父元素。我們不需要像document這樣的點擊事件，因爲明確哪些元素會獲得此事件是個不錯的主意。將它附加到document將意味着任何具有類別.book的元素都可以點擊並響應相同的代碼。如果您想在不同的按鈕中使用不同的功能，則不能，因爲它們都響應與document相同的代碼。

來源

2013-07-24 20:09:58

這些是直接綁定，它們不能用於動態添加的元素，如.book。

您可以使用.on()對這樣的動態地添加的元素綁定事件：

$('body').on('click', '.book' ,function(){ 
    alert('I have been clicked'); 
});

凡的身體會是最接近靜態元素。這些綁定類型被稱爲委託事件。

小提琴：http://jsfiddle.net/3MpcG/2/

或者你可以在創建時，它的元素綁定一個直接的事件。

.appendTo('body').click(function(){ 
    alert('I have been clicked'); 
});

小提琴：http://jsfiddle.net/3MpcG/3/

兩者都有優勢和劣勢，你可以在jQuery .on() docs頁閱讀。

來源

2013-07-24 20:14:01

點擊jQuery的創建的元素上不工作

Jsfiddle

回答

相關問題