Jquery 单击函数不适用于动态元素

Jquery click function is not working for dynamic elements

本文关键字：动态 元素 适用于 不适用 单击 函数 Jquery      更新时间：2023-09-26

我正在使用$.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>

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按钮执行相同的操作。

演示

您正在用 questlist_item_button 覆盖动态 id。

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

那是因为你的 DOM 将是动态创建的。所以你必须在jQuery中使用delegate：

绑定具有选定 ID 的文档上的单击事件：

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

您必须使用.on()函数为动态创建的元素附加事件。

例 

$(document).on('click', '#DYNAMIC_ELEMENT_ID', function(){
     // your action here
});
相关文章：