Question

我正在使用$.each为每个数组对象创建按钮。我还尝试给每个按钮一个特定的id，所以我可以点击事件进行进一步编码，但现在我不知道为什么所有按钮都不起作用。我错过了一些代码吗？

＆＃13;

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);

  });

}

＆＃13;

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

＆＃13;

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 click函数不适用于动态元素

4 个答案: