向动态生成的内容添加单击处理程序.如何去做

Adding click handler to a dynamically generated content. How?

本文关键字：处理 单击 程序 何去做 添加 动态      更新时间：2023-09-26

我的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

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

这里有两个问题:

  1. $.find('a')不工作。你需要首先选择一个dom元素，你将应用选择器(例如$(document).find('a'))。
  2. 您正在将li s附加到使用$('links')选择的元素。这也行不通。这个语法选择标记。没有HTML标签<links>。我猜你实际上要做的是选择id为"链接"的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>

Try on:

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

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

一个是在你添加的每个<li>上添加一个click处理程序…

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/

相关文章：