jquery點擊功能不適用於動態元素

Question

我正在使用$.each來創建每個數組對象的按鈕。我也嘗試給每個按鈕一個特定的ID，所以我可以做點擊事件進一步編碼，但現在我不知道爲什麼所有的按鈕都不起作用。我錯過了一些代碼嗎？

var questlist = [{ 
 
    "startdate": "2015-01-08", 
 
    "questitem": [ 
 

 
    { 
 
     "questid": "1", 
 
     "gifttype": "stars", 
 
     "quantity": 10, 
 
     "questname": "One", 
 
     "queststatus": "done" 
 
    }, { 
 
     "questid": "2", 
 
     "gifttype": "stars", 
 
     "quantity": 50, 
 
     "questname": "Two", 
 
     "queststatus": "ready" 
 
    }, { 
 
     "questid": "3", 
 
     "gifttype": "stars", 
 
     "quantity": 100, 
 
     "questname": "Three", 
 
     "queststatus": "complete" 
 
    }, { 
 
     "questid": "4", 
 
     "gifttype": "stars", 
 
     "quantity": 120, 
 
     "questname": "Four", 
 
     "queststatus": "done" 
 
    }, { 
 
     "questid": "5", 
 
     "gifttype": "stars", 
 
     "quantity": 220, 
 
     "questname": "Five", 
 
     "queststatus": "ready" 
 
    }, 
 

 
    ] 
 

 
}]; 
 
questitemlist(questlist); 
 

 
function questitemlist() { 
 
    var callquest = "<div class='questlist_container'>" + 
 
    "<div id='call_questitem'></div>" + 
 

 
    "</div>"; 
 

 
    $("#call_quest").append(callquest); 
 
    var questlistobj = questlist[0].questitem; 
 
    $.each(questlistobj, function(i, obj) { 
 
    if (obj.queststatus == "ready") { 
 
     var questlist_item_button = "<input type='button' id='questlist_item_button_go" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='GO !'/>"; 
 
     $("#questlist_item_button_go" + obj.questid).click(function() { 
 
     alert("go"); 
 

 
     }); 
 
     console.log("#questlist_item_button_go" + obj.questid); 
 
    } else if (obj.queststatus == "done") { 
 
     var questlist_item_button = "<input type='button' id='questlist_item_button_reward" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='REWARD !'/>"; 
 
     $("#questlist_item_button_reward" + obj.questid).click(function() { 
 
     alert("reward"); 
 

 
     }); 
 
    } else if (obj.queststatus == "complete") { 
 
     var questlist_item_button = "<label class='questlist_item_complete'><img class='questlist_item_img' src='img/check.png'/></label>"; 
 

 
    } 
 

 
    var questlist_item = "<div class='questlist_item'>" + 
 
     questlist_item_button + 
 
     "<label class='questlist_item_questname'>" + obj.questname + "</label>" + 
 
     "<label class='questlist_item_gifttype'>" + obj.gifttype + " " + obj.quantity + " " + "</label>" + 
 
     "</div>"; 
 

 
    $("#call_questitem").append(questlist_item); 
 

 
    }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="call_quest"></div>

Answer 1

的click()功能，你可以在其上有直接結合元素調用。直接綁定只會附加在DOM加載時出現的事件處理程序，即靜態元素。

如果在DOM加載後創建了元素，那麼如果您沒有正確附加事件處理程序，並非所有與它們相關的事件都會被觸發。

而且當你創建動態的元素，這意味着加載DOM後，他們正在創造他們沒有出席的直接結合時間，所以您不能直接調用該click()。

如果您想在動態創建的元素上獲得click功能，您將通過使用on創建委託綁定。這可以通過將一個.on處理程序添加到靜態父元素來實現。

Delegated events have the advantage that they can process events from descendant elements that   
are added to the document at a later time. 

改變這一行

$("#questlist_item_button_reward" + obj.questid).click(function() { 
    alert("reward"); 
}); 

到

$("#call_questitem").on("click", "#questlist_item_button_reward" + obj.questid, function() { 
    alert("reward"); 
}); 

做同樣的go按鈕爲好。

DEMO

Answer 2

你覆蓋動態ID與questlist_item_button。

<input 
    type='button' 
    id='questlist_item_button_go"+obj.questid+"' 
    class='questlist_item_button' 
    id='questlist_item_button' <!-- REMOVE ME --> 
    value='GO !'/> 

Answer 3

這是因爲您的DOM將會在運行中創建。所以，你必須使用委託使用jQuery：在文檔

綁定click事件與選擇的ID：

$(document).on('click', '#questlist_item_button_go'+obj.questid, function(){ 
    // your action here 
}); 

Answer 4

你必須使用.on()功能附加事件動態創建的元素。

例

$(document).on('click', '#DYNAMIC_ELEMENT_ID', function(){ 
    // your action here 
});