Question

我希望将一个onclick事件添加到一个使用ajax动态生成的按钮。我怎么能这样做？

我有生成内容的代码，当我们点击该项目时，我想要一个弹出窗口。

function getTableData() {

             $.post( 'loader.php', getGetStr(), function( data ) {

             Object.size = function(obj) {
                var size = 0, key;
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) size++;
                }
                return size;
            };
                 data = $.parseJSON(data)['query-data'];
                 var leng = Object.size(data);

                 var html = '';

                 for(var i = 0; i<leng; i++) {
                     html += '<tr><td>&nbsp;</td>\n\
                                <td>'+data[i].buy_type+'</td>\n\
                                <td>'+data[i].prop_type+'</td>\n\
                                <td>'+data[i].district+'</td>\n\
                                <td>'+data[i].street+'</td>\n\
                                <td>'+data[i].room_min+'</td>\n\
                                <td>'+data[i].room_max+'</td>\n\
                                <td>'+data[i].price_min+' mFt</td>\n\
                                <td>'+data[i].price_max+' mFt</td>\n\
                                <td>'+data[i].condition_type+'</td>\n\
                                <td>'+data[i].heat_type+'</td>\n\
                                <td>'+data[i].lift_type+'</td>\n\
                                <td>'+data[i].parking_type+'</td>\n\
                                <td><img src="style/images/icons/delete.png" id="'+data[i].id+'" class="delete-searching-item"/></td>\n\
                            </tr>';

                 }

                 $('table').append(html);
                 $('.delete-searching-item').on('click',function() {
                     var id = $(this).attr('id');
                            alert(id);
                            $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">');
                            $('#why-delete').fadeIn(500);
                });



         });
        }

Answer 1

像这样使用：

$('table').on('click','.delete-searching-item',function() {

由于您在dom之后添加了img.delete-searching-item，因此需要引用未更改的元素，例如table。使用.on()，您可以在dom中“取回”。

所以你的整个代码：

function getTableData() {
    $.post('loader.php', getGetStr(), function(data) {
        Object.size = function(obj) {
            var size = 0,
                key;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };
        data = $.parseJSON(data)['query-data'];
        var leng = Object.size(data);
        var html = '';
        for (var i = 0; i < leng; i++) {
            html += '<tr><td>&nbsp;</td>\n\
                                <td>' + data[i].buy_type + '</td>\n\
                                <td>' + data[i].prop_type + '</td>\n\
                                <td>' + data[i].district + '</td>\n\
                                <td>' + data[i].street + '</td>\n\
                                <td>' + data[i].room_min + '</td>\n\
                                <td>' + data[i].room_max + '</td>\n\
                                <td>' + data[i].price_min + ' mFt</td>\n\
                                <td>' + data[i].price_max + ' mFt</td>\n\
                                <td>' + data[i].condition_type + '</td>\n\
                                <td>' + data[i].heat_type + '</td>\n\
                                <td>' + data[i].lift_type + '</td>\n\
                                <td>' + data[i].parking_type + '</td>\n\
                                <td><img src="style/images/icons/delete.png" id="' + data[i].id + '" class="delete-searching-item"/></td>\n\
                            </tr>';
        }
        $('table').append(html);
        $('table').on('click','.delete-searching-item',function() {
            var id = $(this).attr('id');
            alert(id);
            $('#submit-delete').append('<input type="hidden" name="to-delete" value="' + id + '">');
            $('#why-delete').fadeIn(500);
        });
    });
}

Answer 2

请查看以下

$(".delete-searching-item").live("click", function(){  }); // jQuery 1.3+
$(document).delegate(".delete-searching-item", "click", function(){  }); // jQuery 1.4.3+
$(document).on("click", ".delete-searching-item", function(){  }); // jQuery 1.7+

动态生成的div onclick事件

2 个答案: