javascript - 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

您可以在具有直接绑定(bind) 的元素上调用click() 函数。直接绑定(bind)只会附加在 DOM 加载时存在的事件处理程序，即静态元素。

如果在加载 DOM 后创建了元素，那么如果您没有正确附加事件处理程序，则不会触发与它们关联的所有事件。

当您创建动态元素时，这意味着它们是在 DOM 加载后创建的，并且它们在直接绑定(bind) 时不存在，因此您不能直接调用 click() 上。

如果您想在动态创建的元素上获得点击 功能，您需要使用on 创建一个委托(delegate)绑定(bind) .这可以通过将 .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