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

【问题标题】：Jquery click function is not working for dynamic elementsJquery点击功能不适用于动态元素
【发布时间】：2015-03-14 15:09:37
【问题描述】：

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

【问题讨论】：

标签： javascript jquery dynamic

【解决方案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

【讨论】：

【解决方案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 !'/>

【讨论】：

【解决方案3】：

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

在具有选定 id 的文档上绑定点击事件：

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

【讨论】：

【解决方案4】：

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

示例

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

【讨论】：