Jquery on change does not work after reflecting ajax results

Question

I am new to jquery. I am trying dynamic adding,editing,searching of table though jquery, php. My code works fine for initial adding,editing,searching. However, after searching, when I replace the table entries through ajax and try to edit the resultant entries, the click/change functions do not work.

$(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

Event are assigned to elements when document is ready. Any element which is added later will not be attached to any event automatically.

Either try using .delegate or .on or attach event explicitly after your new element is added.

Answer 2

use .on()

As elements added dynamically so it is not present at the time DOM ready or page load.

So you have to use Event Delegation

Syntax

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

like this

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

or

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