Question

$(document).ready(function() {
    $.ajax({
        url: 'DisplayController',
        type: 'GET',
        success: function(response) {
            var trHTML = '';
            $.each(response, function(i, item) {
                trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
                    '</td><td>' + '<button id="item.id" class="btn">Delete</button>'
                '</td></tr>';
            });
            $('#delTable').append(trHTML);
        }
    });
    $('button').click(function() {
        var val = $(this).attr("id");
        console.debug("saurabh userid", val);
        var rowElement = $(this).parent().parent();
        $.ajax({
            type: "POST",
            data: {
                productid: val
            },
            url: "DisplayController",
            success: function(result) {
                rowElement.find('td').fadeOut('3000',
                    function() {
                        rowElement.remove();
                    }
                );
            }
        });
    });
});

<table id="delTable" border=1 align="center" height="150" width="200">
<thead>
        <tr>
            <th width="100">Product Name</th>
            <th width="100">Price</th>
            <th width="100">Id</th>
            <th width="100">Delete</th>

        </tr>
    </thead>


    </tbody>
</table>
    <
<!--     <p><a href="UserController?action=insert">Add User</a></p> -->

我正在尝试点击带有id（item.id）$('button').click的表格中的按钮，但它无效。我甚至尝试使用$('#delTable').find('tr').click但是通过这样做，它只有在我点击表格的第一行和第一个单元格时才有效。

Answer 1

您需要使用event delegation将事件处理程序添加到动态添加的html元素中。

$('#delTable').on('click','button', function() {
    var val = this.id.split('_')[1];
    console.debug("saurabh userid", val);
    var rowElement = $(this).parent().parent();
    $.ajax({
        type: "POST",
        data: {
            productid: val
        },
        url: "DisplayController",
        success: function(result) {
            rowElement.find('td').fadeOut('3000',
                function() {
                    rowElement.remove();
                }
            );
        }
    });
})

并使用适当的串联来获取不同的ID

$.each(response, function(i, item) {
    trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
        '</td><td>' + '<button id="id_' + item.id + '" class="btn">Delete</button>'
        '</td></tr>';
});

Answer 2

尝试使用回调函数。
这将始终采用当前值。

$(document).on("click", "button", function() {
    //line of code
});

Answer 3

如果您的按钮动态添加到DOM，您可能需要尝试

$('button').on('click', function(){
    // Your logic
});

功能

Answer 4

你应该使用dataType:'json'，因为你的回复数据是json而你的按钮ID插入无效，因为你输入了""

   $.ajax({
    url: 'DisplayController',
    type: 'GET',
    dataType : 'json',//json return
    success: function(response) {
        var trHTML = '';
        $.each(response, function(i, item) {
            trHTML += '<tr><td>' + item.name + '</td><td>' + item.id + '</td><td>' + item.price +
                '</td><td>' + '<button id="'+item.id+'" class="btn">Delete</button>'
            '</td></tr>';//button id must like this
        });
        $('#delTable').append(trHTML);
    }
});

还应该使用document.on的ajax append元素，因为对于事件触发器

 $(document).on('click','button',function() {
    var val = $(this).attr("id");
    var rowElement = $(this).parent().parent();
    $.ajax({
        type: "POST",
        data: {
            productid: val
        },
        url: "DisplayController",
        dataType : 'json',
        success: function(result) {
            rowElement.find('td').fadeOut('3000',
                function() {
                    rowElement.remove();
                }
            );
        }
    });
});

Answer 5

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

                var trHTML = "";

                for (i = 0; i < 5; i++) {
                    trHTML += '<tr><td>' + "item.name" + '</td><td>' + "item.id" + '</td><td>' + "item.price" +
                                '</td><td>' + '<button id="item.id" class="btn">Delete</button>'
                    '</td></tr>';

                    $('#delTable').append(trHTML);
                }

        $('button').click(function () {
            var val = $(this).attr("id");
            var rowElement = $(this).parent().parent();


            rowElement.find('td').fadeOut('3000',
                function () {
                    rowElement.remove();
                }
            );


        });
    });


</script>



<body>
 <table id="delTable" border=1 align="center" height="150" width="200">
<thead>
        <tr>
            <th width="100">Product Name</th>
            <th width="100">Price</th>
            <th width="100">Id</th>
            <th width="100">Delete</th>

        </tr>
    </thead>


    </tbody>
</table>
 </body>
</html>

onclick在jquery中不起作用

5 个答案: