Question

这是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 width="45">' + this["RefID"] + '</td><td width="140">' + this["Name"] + '</td><td width="95">' + this["CheckNumber"] + '</td><td align="right" width="70">$' + this["Amount"] + '</td><td width="220" 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();
            }
        });
    });
});

Answer 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 ....
    });
</script>

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

Answer 2

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

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

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

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

加载动态加载的内容并运行replace命令后，将映射事件并且代码运行正常。

Answer 3

我的评论太长了，抱歉。

只是一个问题和一条评论，尽管我看到这是一篇旧文章。我在使用时遇到了很多麻烦：$（document）.on（'click'，'#xxx“，function（e）{}）;将处理程序附加到使用AJAX返回的内容上，而不是使用function（）{ $（'＃xxx）.on（'click'，function（e）{}）;}并在AJAX调用成功返回后调用该方法。使用该方法是否有某种技巧或准则？我尝试使用它，但它通常不起作用。我可以尝试委托给封闭元素。也许由于某种原因它没有冒泡到文档或主体上？

ajax调用后，Jquery事件不会触发

3 个答案: