1

在我正在制作的网站页面中，按下按钮会导入另一个 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 网站似乎已关闭，经过一番搜索，我找不到任何解决问题的方法。有什么办法可以防止代码像这样重复吗？

4

3 回答 3

4

您可以传入事件，.click(function(e) {...})然后调用e.stopImmediatePropagation()以仅触发当前处理程序，但这只能解决症状，而不是真正的问题。

编辑：确保您只通过向选择器添加上下文来绑定按钮的新实例，例如$('.ExpandRoleButton', data). 由于您在一个类上进行匹配，因此该选择器将抓取页面上的所有按钮；上下文允许您仅选择结果中的一个。

于 2012-05-05T19:46:18.193 回答
4

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

下次#AjouterPiece单击时，它会再次绑定。

为防止这种情况，您必须unbind在绑定之前使用以下代码单击处理程序

$( ".ExpandRoleButton").unbind('click')
于 2012-05-05T19:49:15.017 回答
0

一个好的做法（只是为了防止发生此类问题，添加了意外的多次点击处理程序）是......

$(".selector").off('click').on('click', function...

或者

$(".selector").unbind('click')...
$(".selector").bind('click')...
于 2015-04-28T16:19:02.123 回答