jQuery使用load刷新DIV后AJAX仅生效一次，需刷新页面才能正常运行

问题根因 #

• 你使用的直接绑定事件的写法（$(selector).click()、$(selector).submit()）仅对页面初始加载时就存在的DOM元素生效，当你调用load()方法替换#seo-table-ref区域的内容后，原有绑定了事件的DOM元素被销毁，替换后的新元素没有绑定对应事件，所以操作会失效。
• 你把表单的submit事件绑定嵌套在了#addCanonical的click回调内部，每次点击添加按钮都会给表单重复绑定提交事件，就算没有DOM替换的问题，也会出现多次提交请求的异常。
• 部分浏览器会缓存load()请求的结果，也可能导致刷新后内容没有更新的问题。

修复后的代码 #

// 事件统一委托绑定到document（或者你页面上不会被动态替换的顶层容器元素即可），不要嵌套绑定
$(document).on('click', '#addCanonical', function(e){
    e.preventDefault();
    $('#exampleModal1 .modal-title').html('Edit Canonicals');
    $('#exampleModal1 form input').attr('value','canonical');
    $('#exampleModal1 form input').css('pointer-events', 'none');
    $('#modal-btn1').click();
});

// 表单提交事件也用委托绑定，移出click回调避免重复绑定
$(document).on('submit', '#exampleModal1 form', function(e){
    e.preventDefault();
    let formData = $(this).serialize();
    $.ajax({
        type:'post',
        url:'https://awarno.com/ajax.php',
        data:formData+"&addSeo=true&pid=<?php echo $ref_id ;?>&page=<?php echo $page ;?>",
        success:function(res){
            console.log('form add seo');
            $('#exampleModal1 form input').css('pointer-events', 'all');
            $('.btn-close').click();
            // load请求加时间戳避免缓存，替换目标区域内容
            $('#seo-table-ref').load(location.href + "?t=" + new Date().getTime() + " #seo-table-ref");
        }
    });
});

内容的提问来源于stack exchange，提问作者abhishek singh