無法在 jQuery AJAX 中多次生成點擊事件 (unable to generate click event more than once in jQuery AJAX)

問題描述

無法在 jQuery AJAX 中多次生成點擊事件 (unable to generate click event more than once in jQuery AJAX)

   $('table tbody tr').click(function add_div() {
    if ($('#dynEdit').length > 0) {
        $('#dynEdit').remove();
        return false;
    }
    $(this).after('<div id="dynEdit"></div>');
    $.ajax(
        {
            url: '/TransJobAddress/EditAddress',
            datatype:'html',
            success: function(data,textStatus,jqXHR)
            {
                $('#dynEdit').html(data);
            },
            error:function( jqXHR, textStatus,errorThrown)
            {
                alert('The server saying:' + errorThrown);

            }
        });

});
$('#close').click(function closediv() {
    $('#addrIndex').load('/TransJobAddress/ListAddresses #addrIndex table');

});

我在 mvc 項目中使用它

通過單擊一行我可以使用 ajax 插入編輯頁面，這沒關係。當使用新記錄按鈕插入新記錄時，我將 div 標籤中的表格列表替換為 Id="addrIndex"

單擊新記錄框上的取消按鈕後，它將返回到表格列表。如果我點擊再次在任何行第二次沒有任何工作。在取消一條新記錄後，如何再次編輯一行。

delegate your event handler from a parent that's there at the time of binding

$(document.body).on('click','tr', function(e) {//...});

方法 2:

The problem is when the HTML gets replaced, the elements lose its bindings. Try binding the click in your div.

$("#addrIndex").on("click", "table tbody tr", function () {

});

方法 3:

bind click on #addrIndex jQuery on

$("#addrIndex").on('click', 'table tbody tr', function(){
   ///your code here
});

(by Ravi Hanok、mikakun、WannaCSharp、Anoop)

參考文件

1. unable to generate click event more than once in jQuery AJAX (CC BY‑SA 3.0/4.0)