javascript - 将点击处理程序添加到动态生成的内容。如何？

Question

我的Json格式如下:

[{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
{"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"}]

我还有一个 jquery 脚本，我在其中添加动态超链接:

$.ajax({
  url: './download.php', 
  type: "POST",
  data: {
    id: id
  },
  dataType:'text',
  success: function(ans)
  {
    var data = JSON.parse(ans);

    $.each(data, function(i, v) {
        $('links').append('<li><a><div>' + v.Text + '<span class="small">' + v.DateTime+ '</span></div></a></li>');

    });     

    }});

我想要一个简单的效果 - 我网页上的超链接列表。当用户点击任何超链接时，他将看到一个警告窗口，其中包含字段 id、Color、DateTime 和 Text。

我尝试在 $.each 中添加一个函数:

$.find('a').click(function(){
    alert(v.Color+v.id+v.Date+v.Text);
})

但它告诉我:

Uncaught TypeError: $.find(...).click is not a function

那么我如何将一个函数(点击处理程序)附加到每个生成的链接，以显示与点击链接相关的所有属性？

Answer 1

这里有两个问题:

1. $.find('a')是行不通的。您需要先选择一个要应用选择器的 dom 元素(例如 $(document).find('a') )。
2. 您要附加 li s 到使用 $('links') 选择的元素.这也行不通。此语法选择标记。没有 HTML 标签 <links> .我猜你实际上想做的是选择 id 为“links”的 dom 元素。为此，您需要执行 $('#links') .

这是一个工作片段。

var data = [
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"},
  {"id":"1","Text":"esj","DateTime":"2015-10-21 19:00:00", "Color":"Red"}
];


$.each(data, function(i, v) {
  // Create the li.
  var li = $('<li><a href="#"><div>' + v.Text + '<span class="small">' + v.DateTime + '</span></div></a></li>');

  // Append it to the dom element with the id "links".
  $('#links').append(li);

  // Attach the click handler to its <a> child.
  var a = li.find('a').on('click', function(e){
    e.preventDefault();
    alert(v.Color + " " + v.id + " " + v.DateTime + " " + v.Text);
  });

});

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