unable to generate click event more than once in jQuery AJAX

Question

   $('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');

});

I am using this in mvc project

By clicking on a row i can insert edit page using ajax this is ok. When Insert new record using new record button I am replacing table list which is in div tag with Id="addrIndex"

After clicking CANCEL button on new record box it is going back to table list .If I click again on any row second time nothing is working. How can I Edit a row again more that one time after cancel a new record also.

Answer 1

从绑定时的父级委派您的事件处理程序

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

Answer 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 () {

});

Answer 3

bind click on #addrIndex jQuery on

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