1

单击按钮后，我的脚本会加载新内容。只要它正在加载，我不希望元素列表是可点击的。

有没有办法解除这些元素的点击事件，加载内容，然后正确地“重新绑定”事件？

我要防止的是每个点击功能/元素中的 if 语句。

这是我尝试过的：

$(load_button).click(function(){
    $('a').each(function(){
        var dis_e = $(this).data('events');
        $(this).data('disabled-events', dis_e);
    }).unbind('click');

    $(some_content).load(function(){
        $('a').each(function(){
            var dis_e = $(this).data('disabled-events');
            $(this).removeData('disabled-events');
            $(this).bind('click', dis_e);
        });
    });
});

更新：

它还应该防止元素（在这种情况下）警告“点击”：

$('a').click(function(){
   alert('click');
});
4

2 回答 2

2

您可以为您的元素临时绑定一个具有特定命名空间的新点击事件，这将阻止点击事件传播，并且当您的内容加载时，您可以取消绑定事件。

$("a").bind("click.disabled", function(e) {
    e.stopImmediatePropagation();
    return false;
});

后来：

$("a").unbind("click.disabled");

编辑：正如 Yoshi 所指出的，这期望您的单击事件处理程序在您的自定义事件之前附加到元素。所以我可以看到两种解决方法：

  1. 要么在创建元素时始终将此事件处理程序绑定到每个元素，以便始终在自定义单击事件处理程序之前调用它们。stopImmediatePropagation()而且您仅return false在加载数据时才这样做。
  2. 或者您检查这个其他问题，以便您的新事件处理程序位于列表的第一位。

如果您选择第一种方法，您的事件将是这样的：

var clicDisabled = false;
$("a").bind("click.disabled", function(e) {
    if (true == clicDisabled) {
        e.stopImmediatePropagation();
        return false;
    }
});

然后在加载内容时将变量clicDisabled临时设置为 true。

于 2012-12-05T18:15:02.330 回答
1

根据您的回答，我编写了以下插件：

(function($){
    $.fn.rebind = function(){
        var init = 'init-rebind';
        return this.each(function() {
            var is_init = $(this).data(init);
            if (!is_init){
                $(this).data(init, true);
                $(this).bind('click.rebind mouseenter.rebind mouseleave.rebind', function(e){
                    if ($(this).hasClass('disabled')){
                        e.stopImmediatePropagation();
                        e.preventDefault();
                    }
                });
            }
        });
    };
})(jQuery);

我决定添加/删除“禁用”类，而不是使用全局变量，以便在 css 中也有控制权。

查看演示！

THX 给大家！

更新：看看这个！！

于 2012-12-06T08:23:56.583 回答