动态生成的div onclick事件

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+