将 jQuery .click() 添加到动态创建的 HTML答案

【问题标题】：Adding jQuery .click() to dynamically created HTML将 jQuery .click() 添加到动态创建的 HTML
【发布时间】：2012-02-11 01:22:59
【问题描述】：

在我的网络应用程序中，我使用 jQuery 动态创建实时提要以解析 JSON 对象并在 html 中动态创建表格行（请参阅我之前的问题 here 以获取示例）

我从 JSON 对象动态创建的每个表行，我添加一个图像（使用标准的 html img 标签） - 我现在想要做的是创建一个 .click() 函数，该函数执行异步 ajax 调用图像被点击。

所以，如果我的动态创建表格行的代码如下所示：

var html = "<tr>"
            + "<td><img class=\"status_refresh\" src=\"/refresh.png\" id=\"refresh_id\"/></td>"
            + "</tr>";

$('#peopleDirectory').append(html);

在我的 JSP 中，定义了 peopleDirectory div，并将附加 html，我有以下 javascript：

$('.status_refresh').click(function () { 
    console.log($(this).attr('id')); 
});

但是当我点击时什么都没有发生。任何人都可以告诉我我做错了什么吗？

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

click 事件仅绑定到绑定时存在的对象。要将事件绑定到所有现有的和未来对象，请使用live 方法。 Source Link

描述：将处理程序附加到匹配的所有元素的事件当前选择器，现在和在未来。

$('.status_refresh').live('click', function () { 
    console.log($(this).attr('id')); 
});

【讨论】：

此时LIVE已被弃用，应替换为.on()

【解决方案2】：

live() 可以使用，但我建议在您的容器中使用delegate()：

$('#peopleDirectory').delegate('.status_refresh', 'click', function(){ 
     //do stuff
}

live() 将点击处理程序附加到document 并为每个事件一直冒泡。 delegate() 在您指定的容器处停止事件冒泡。 delegate() 的唯一问题是您指定的容器元素必须已经存在于 DOM 中。但是，如果您不确定容器是否存在，您可以使用$('body').delegate()。

【讨论】：

【解决方案3】：

将所有绑定函数放在一个函数中...
现在在 $(document).load() 中调用此函数，以及通过它将 html 添加到 DOM 的 ajax 的成功函数

注意* - 在 Success 方法中调用此函数是必要的，因为 ajax 是同步的，并且只有在响应到来之后才调用成功方法，因此如果在将 html 添加到 DOM 之后调用这些函数，则这些函数将被绑定

【讨论】：

【解决方案4】：

试试这个（ID 不能相等）：

(example)

html:

<table>
</table>
<br />
<button>add</button>

js:

var 
    idAdd = 0,
    addToTable = function() {

        var
            img = $('<img />'),
            td = $('<td />'),
            tr =  $('<tr />');

        img
            .addClass('status_refresh')
            .attr('src', 'http://jsfiddle.net/img/top-bg.png')
            .attr('name', 'refresh_id')
            .attr('id', 'refresh_id_' + idAdd)
            .bind('click', function(ev) {

                console.log($(this).attr('id')); 

            });

        idAdd++;

        td.append(img);
        tr.append(td);

        return tr;

    };

$('button').bind('click', function(event){
    $('table').append(addToTable());
});

【讨论】：

我喜欢你的 javascript 编码风格！ :)

【解决方案5】：

除了Dutchie432和Jason说的，你也可以在附加html之后附加你的点击事件。那也行>

var html = "<tr>"
            + "<td><img class=\"status_refresh\" src=\"/refresh.png\" id=\"refresh_id\"/></td>"
            + "</tr>";

$('#peopleDirectory').append(html);

//and now attach the event handler again
$('.status_refresh').click(function () { 
    console.log($(this).attr('id')); 
});

【讨论】：