javascript - JQuery 事件在动态内容中重复

Question

在我正在制作的网站页面中，按下按钮会导入另一个 php 页面的内容并将其附加到页面上。但是，其他页面包含 JQuery，每次我导入内容时，点击事件 ($( ".ExpandRoleButton").click) 都会在前面的元素上重复自身。所以如果我添加 3 个元素；

元素1:重复点击事件3次

元素2:重复点击事件2次

元素3:运行一次点击事件

$("#AjouterPiece").click(function() 
{
    $.blockUI({ message: '<img src="images/ChargementGeant.gif"/><br/><h1>Un moment svp.</h1>' });
    $.post("wizardincl/piste.php", {newPiste: newPiste}, function(data)
    {
        $("#wizardPistes").append(data);
        $.unblockUI();
        $(".divNewPiste").fadeTo(300, 1);
        $("#nbExemplaires").attr("max", newPiste);
        newPiste++

        $( ".ExpandRoleButton").click(function()
        {
            if ($(this).hasClass('RetractRoleButton'))
            {
                $(this).find('img').attr('src', 'images/ExpandPetitNoir.png');
                var that = $(this);
                $(this).parent().parent().parent().parent().next().slideUp(500, function() {
                    that.parent().parent().parent().parent().css('border-bottom', '1px solid #FF790B');
                });
                $(this).removeClass('RetractRoleButton');
            }
            else
            {
                $(this).parent().parent().parent().parent().css('border-bottom', 'none');
                $(this).find('img').attr('src', 'images/ExpandPetitNoirRetour.png');
                $(this).parent().parent().parent().parent().next().slideDown(500);
                $(this).addClass('RetractRoleButton');
            }
        });

    });
});

目前，部分JQuery网站出现故障，经过一番搜索，我找不到任何解决问题的方法。有什么办法可以防止代码像这样重复自己吗？

Answer 1

这是因为您将事件绑定(bind)到多个事件处理程序。第一次点击 #AjouterPiece 时，所有 .ExpandRoleButton 按钮都会绑定(bind)到一个 onclick 处理程序。

下次点击 #AjouterPiece 时，它会再次绑定(bind)。

为防止这种情况，您必须在绑定(bind)之前使用以下代码取消绑定(bind)点击处理程序

$( ".ExpandRoleButton").unbind('click')