Question

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

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

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

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

但是当我点击时没有发生任何事情..任何人都可以建议我做错了吗？

谢谢！

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

将所有绑定函数放在函数中......
现在在$(document).load()内调用此函数，以及将jtml添加到DOM的ajax的成功函数

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

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

Answer 5

除了Dutchie432和Jason所说的，你还可以在附加html后附加你的点击事件。这也可以＆gt;

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

将jQuery .click（）添加到动态创建的HTML中

5 个答案: