反映ajax结果后，Jquery on change不起作用

Question

我是 jquery 的新手。我正在尝试通过 jquery、php 动态添加、编辑、搜索表。我的代码适用于初始添加、编辑、搜索。但是，搜索后，当我通过 ajax 替换表条目并尝试编辑结果条目时，单击/更改功能不起作用。

$(document).ready(function () {
$(".edit_tr").click(function () {
    var ID = $(this).attr('id');
    $("#Client_" + ID).hide();
    $("#address_" + ID).hide();
    $("#Client_input_" + ID).show();
    $("#address_input_" + ID).show();
})

$(".edit_tr").change(function () {
    var ID = $(this).attr('id');
    var Client = $("#Client_input_" + ID).val();
    var address = $("#address_input_" + ID).val();

    var dataString = 'id=' + ID + '&Client=' + Client + '&address=' + address;


    $.ajax({
        type: "POST",
        url: "table_edit_ajax.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $("#Client_" + ID).html(Client);
            $("#address_" + ID).html(address);
        }
    });
} else {
    alert('Enter something.');
}

});

// Edit input box click action
$(".editbox").mouseup(function () {
    return false
});

// Outside click action
$(document).mouseup(function () {
    $(".editbox").hide();
    $(".text").show();
});

});

Answer 1

当文档准备好时，事件被分配给元素。以后添加的任何元素都不会自动附加到任何事件。

在添加新元素后尝试使用 .delegate 或 .on 或显式附加事件。

Answer 2

使用.on()

由于元素是动态添加的，因此在 DOM 准备好或页面加载时不存在。

所以你必须使用Event Delegation

语法

$( elements ).on( events, selector, data, handler );

喜欢这个

$(document).on('click','.edit_tr',function(){
    //code here
});

或

$('parentElementPresesntAtDOMready').on('click','.edit_tr',function(){
   // code here
});