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脚本，我在其中添加了dinamically超链接：

$.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>');

    });     

    }});

我想要一个简单的效果 - 我网页上的超链接列表。当用户cliks任何超链接时，他将看到一个警告窗口，其中包含字段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

尝试on：

$('#links').on('click', 'a', function() {
    alert('message');
});

Answer 2

这里有两个问题：

$.find('a')无效。您需要先选择要应用选择器的dom元素（例如$(document).find('a')）。
您要将li s附加到使用$('links')选择的元素。这也行不通。此语法选择标记。没有HTML代码<links>。我想你实际上要做的是选择带有id＆＃34;链接＆＃34;的dom元素。为此，您需要执行$('#links')。

这是一个工作片段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

有几种方法可以做到这一点。

一种是在您添加的每个click上添加<li>处理程序...

var $li = $('<li><a><div>' + v.Text + '<span class="small">' + v.DateTime+ '</span></div></a></li>');
$('#links').append($li);
$li.click(function(){
    alert(v.Color+v.id+v.DateTime+v.Text);
});

http://jsfiddle.net/daveSalomon/t38x715g/

另一种方法是将处理程序绑定到links元素，并将on与选择器一起使用。您需要跟踪要显示的数据 - 您可以使用$.data。

$('#links').on('click','a',function(){
    var $li = $(this).parents('li');                
    alert($li.data('Color')+''+$li.data('id')+''+$li.data('DateTime')+''+$li.data('Text'));
});

http://jsfiddle.net/daveSalomon/t38x715g/2/

将click处理程序添加到动态生成的内容中。怎么样？

3 个答案: