ajax调用后Jquery事件不会触发

Posted 2023-05-09

【中文标题】ajax调用后Jquery事件不会触发

【英文标题】：Jquery Event won't fire after ajax call

【发布时间】：2012-11-25 21:59:55

【问题描述】：

这是 jquery 的一个相当奇怪的问题。我正在加载一个 div

<div id="container">

在页面加载时。每条记录都是表格数据，并带有与之关联的“删除”ajax 函数。当页面加载并单击“删除”链接时，ajax 调用就会很好地触发。 但是，一旦触发事件，就会从 ajax 调用返回数据，并且 div 会填充数据（但页面不会刷新或重新加载） 当我再次单击该链接时，ajax 脚本将不会触发。 这是我的代码：

$(document).ready(function() 
    $("button.done").button(
    ).click(function() 
        var BatchID = $("input#BatchID").val();
        var Amount = $("input#Amount").val();
        var Name = $("input#CheckName").val();
        var Check_Number = $("input#Check_Number").val();
        var Company = $("select#Company").val();
        var Department = $("select#Department").val();
        $.ajax(
            type: 'GET',
            url: '/app/usagCheckEntryWS.html',
            data: 
                "BatchID" : BatchID,
                "Amount" : Amount,
                "Name" : Name,
                "Check_Number" : Check_Number,
                "Company" : Company,
                "Department" : Department
            ,
            success: function (data) 
                    var ang = '';
                    var obj = $.parseJSON(data);
                    $.each(obj, function() 
                       ang += '<table><tr><td >' + this["RefID"] + '</td><td >' + this["Name"] + '</td><td >' + this["CheckNumber"] + '</td><td align="right" >$' + this["Amount"] + '</td><td  style="padding-left: 15px;">' + this["Description"] + '</td><td><div class="delete" rel="' + this["RefID"] + '"><span>Delete</span></div></td></tr></table>';
                    );
                    $('#container').html(ang);
                    $("input#Amount").val('');
                    $("input#CheckName").val('');
                    $("input#Check_Number").val('');
                    $("select#Company").val('MMS');
                    $("th#dept").hide();
                    $('input#CheckName').focus();
            
        );
    );
);

【问题讨论】：

控制台会说什么吗？

您是否删除了包含其余数据的删除链接，然后重新附加它？

没有 chrome 开发工具，不显示任何事件触发。

我没有看到你在哪里绑定删除处理程序。

另见***.com/a/18144022的优秀答案

【参考方案1】：

当您删除一个元素然后替换它（通过 javascript）时，它会丢失在页面加载时添加到它的所有事件绑定。

（这也适用于页面加载后添加到页面的内容 - 即 ajax 加载的内容）

对此有几种可能的解决方案。

1) 封装您的“绑定”代码，并在页面加载时以及相关元素添加回页面后立即调用它。例如：

$(document).ready(function()
    // bind event handlers when the page loads.
    bindButtonClick();
);

function bindButtonClick()
    $('.myClickableElement').click(function()
        ... event handler code ...
    );


function updateContent()
    $.ajax(
        url : '/ajax-endpoint.php',
        data : 'onMyWay' : 'toServer',
        dataType : 'html',
        type : 'post',
        success : function(responseHtml)
            // .myClickableElement is replaced with new (unbound) html element(s)
            $('#container').html(responseHtml);

            // re-bind event handlers to '.myClickableElement'
            bindButtonClick();  
        
    );

2) 更优雅的处理方式：使用jQuery's .on() method。使用它，您可以将事件处理程序绑定到事件目标以外的元素 - 即永远不会从页面中删除的元素。

$(document).ready(function()
    $('body').on('click','.myClickableElement',function()
        ... event handler code ....
    );
);

一些进一步的解释：

.on() 方法使用 event delegation 告诉父元素保留您的事件处理程序代码（第三个参数），并在事件目标 (第二个参数）执行了某种类型的事件（第一个参数）。

如果您使用的是 1.7 之前的 jQuery 版本，请使用现在已弃用的 delegate 方法，它本质上做同样的事情。

另外，值得注意的是，由于事件通过 dom 树“冒泡”的方式，事件目标（.on() 方法的第二个参数）必须是委托元素（jQuery 对象的选择器）的后代.例如，以下内容不起作用

<div id="container-1">
    <div>
        <div id="another-div">
            Some Stuff
        </div>
    </div>
</div>

<div id="container-2">
    <a id="click-me">Event Target!!!</a>
</div>

<script type="text/javascript">
    $('#container-1').on('click','#click-me',function()
        ... event handler code ....
        // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1'
    );
</script>

body 或 document 元素通常是安全的选择，因为通常页面上的每个元素都是后代。

【讨论】：

你 - 是 - 男人！我在使用 socket.io 事件替换部分 dom 时遇到了这个问题，当幻灯片完成滚动时，我的引导轮播不会触发我需要的事件，我已经按照您的描述将事件驱动的 js 包装在 bindsomething() 函数中并且它都在运行现在好了，谢谢！

哇。优秀的解决方案。由于 Google 的新自动播放政策，我在 Chrome 中使用 SoundCloud 自动播放时遇到了问题。这可以解决问题。我添加了一个标志，以便在窗口加载时，将 bindButtonClick 函数传递为 0，从而阻止执行事件处理程序。但是，在 Ajax 调用中，我将它传递给 1，然后事件处理程序就会启动！

只是一个问题和一个评论，虽然我看到这是一个旧帖子。我在使用 function submitorderhandler() $(document).on('click', '#xxx", function(e)

时遇到了很多麻烦

天哪....我正在为此苦苦挣扎...我添加了一个 ajaxComplete 函数来处理它，并检查事件处理程序是否已经存在并且我仍然有问题。你拯救了我的一天！

这东西在哪里可以买到虚拟啤酒？

【参考方案2】：

您可以将事件脚本包含在 DIV 中，并在动态加载内容后运行 Replaceall 命令。

<div class="somescript">
-- Event Script that you want to map with dnamically added content
<div>

-- 动态加载您的内容并在其后运行以下命令。

$(".somescript").replaceAll($(".somescript"));

一旦加载了动态加载的内容并运行了替换命令，事件将被映射并且代码将正常运行。

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习。是什么让您认为绑定到 div 中的元素的任何处理程序在替换内容后仍然被绑定？