使所有javascript函數適用於JavaScript寫入的元素

Question

因此，當用戶單擊+按鈕時，我有一個JavaScript按鈕編寫的新按鈕。

但是，似乎新按鈕無法訪問JavaScript點擊功能。

我想知道如何解決這個問題。

JS

$('div.btn-floating').click(function() { 
//alert(this.id); 
if(this.id === "addnew"){ 

dl= document.getElementById("newpetprofiles"); 
dl.insertAdjacentHTML('afterbegin','<div class="btn-floating btn-large blue waves-effect waves-light"><img src="https://ipet.xyz/template/images/russellharrower.jpg"/></div>'); 

} 

    var morphFAB = $('#overlay'); 
    morphFAB.toggleClass('visible hidden'); 
    if (morphFAB.hasClass('visible')) { 
    $('#form').addClass('animated slideInUp'); 
    }else { 
    $('#form').removeClass('animated slideInUp'); 
    } 
}) 

Answer 1

的。點擊功能遍歷所有匹配元素DOM和增加了對這些要素的事件處理程序。在發生這種情況時，您的動態創建的按鈕不存在。因此沒有附加事件處理程序。您需要使用jQuery.on

變化：

 $('div.btn-floating').click(function() { 

要

 $(document).on("click", "div.btn-floating", function() { 

這將不斷地搜索所有匹配的元素，並增加了，當他們被附加到文件的事件處理程序。最好的解決方案是使用最接近的共同父代替文檔。像這樣：

$("<my common parent element>").on("click", "div.btn-floating", function() {