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

您正在用 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 !'/>

Answer 3

那是因为您的 DOM 将即时创建。所以你必须使用委托 jQuery:

在具有所选 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
});

Jquery 点击功能不适用于动态元素

Jquery click function is not working for dynamic elements

javascript

jquery

dynamic