將jQuery .click（）添加到動態創建的HTML中

Question

在我的web應用程序，我使用jQuery解析一個JSON對象和HTML動態地創建表行動態創建一個鮮活飼料（見我剛才的問題， 這里的例子）

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

但是當我點擊時沒有任何事情發生..任何人都可以建議我做錯了什么？

謝謝！

Answer 1

click事件僅綁定到綁定時存在的對象。 要將事件綁定到所有現有和將來的對象，請使用live方法。 來源鏈接

描述：為現在和將來與當前選擇器匹配的所有元素附加事件的處理程序。

$('.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

1. 將所有綁定函數放在函數中......

2. 現在在$(document).load()調用此函數，以及ajax的成功函數，通過它將html添加到DOM

注* - 在Success方法中調用此函數是必要的，因為ajax是同步的，只有在響應到來之后才調用success方法，因為如果在向DOM添加html后調用這些函數將被綁定

Answer 4

試試這個（ID不能相等）：

（ 例子 ）

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后附加你的點擊事件。 這也會有效

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