Question

以下示例页面根据<button>对象附加三个foo标记，点击后，我希望它们输出foo中的值。例如，单击ID为btn1的按钮，我希望得到输出Title:baz, ID:7198。但是，每按一次按下输出Title:whizbang, ID:7119。

我认为罪魁祸首是按钮的事件处理程序（$("#btn" + i).click(function()），但我不确定。我已经逐步完成了它，当点击时，无论按下哪个按钮，i的值都是2。

我如何完成我正在寻找的行为？ jQuery不是一个要求，而是我碰巧使用的东西。

<html>
<head>
<script type='text/javascript'>
var foo = {
  "foo": [
      {
          "title":"bar",
          "id":7826
      },
      {
          "title":"baz", 
          "id":7198
      }, 
      {
          "title":"whizbang", 
          "id":7119
      }
  ]
};
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() { 
  for (i in foo.foo) { 
      $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
      $("#btn" + i).click(function() { 
          $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
      }); 
  }
}); 

</script>
</head>
<body>
  <div id='content' />
  <div id='result' />
</body>
</html>

Answer 1

fiddle showing this solution working

$(document).ready(function() { 
     for (var i = 0; i < foo.foo.length; i++) { 
         $("#content").append("<button type='button' class='btn' data-btnid='"+i+"'>" + foo.foo[i].title + "</button>"); 
     }

     $("#content").on("click", ".btn", function() {
         var btnid = $(this).attr("data-btnid");
         $("#result").append("<p>Title:" + foo.foo[btnid].title + ", ID:" + foo.foo[btnid].id + "</p>"); 
     });
});

就像其他人所说，你应该改变你的循环。除此之外，这些是我所做的改变：

您的所有按钮都具有相同的行为，因此请为它们提供相同的类而不是ID
将按钮ID放在自定义属性（data-btnid）中。自定义属性以data-开头。
要实际获得所需的行为，您必须动态绑定click事件。基本上，您使用选择器来获取父级，在您的情况下，它是$("#content")，并将点击事件绑定到具有类btn的子级。然后，它访问被单击的自定义属性data-btnid的按钮，以获取id，它是数组中信息的索引。

Answer 2

也许这里需要为每次迭代保存var i的值，例如，在closure：put函数中，你通过这种方式在包装函数中的click（..）中作为参数传递：

$(document).ready(function() { 
    for (i in foo.foo) { 
        $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
        $("#btn" + i).click((function(i){
            function() { 
                $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
            }
        })(i)); 
    }
});

将事件处理程序添加到动态添加的元素

2 个答案: