单击后从#id中删除jQuery事件(或阻止第二次单击)

Question

伙计们!

我正在尽力解决下面的问题,但经过几个小时后,我无法看到正确的路径!让我解释:

• 我有一个元素a-href(#opener),当点击它时,会触发一个jQueryUI模式对话框,它通过ajax在div(#target)中加载一个URL.
• 一切都很完美,但我希望这一次发生!
• 加载模态窗口后,我能够为我的#opener a-href设置一个类(.deactivated)并删除id(#opener)以防止再次触发该动作,但是它不起作用... a-href保持可点击状态并打开模态窗口(#target)多次点击它!
• 我找到的唯一解决方案是使用$(this).fadeOut();从DOM中完全删除a-href.---,但它真的很难看,因为我的链接#opener在空气中消失了.

有任何想法吗？非常感谢你.G.

<script>
$(document).ready(function() {
    $('#opener').click (function() {

        $('#target').load ('http://my.url', function(){
            $('#target').dialog({
                title: 'My Title',
                draggable: true,
                dialogClass:'My Class',
                modal: true,
                hide: { effect: 'fade', speed: 'fast' },
                show: { effect: 'fade', speed: 'fast' },
                closeOnEscape: true,
                closeText: 'Close',
                beforeClose: function(event, ui) { 
                   'window.location.reload(true)'
                },
            });//end dialog   
        });
        $(this).addClass('.deactivated');
        $(this).removeAttr('id');
    });
});

Answer 1

从元素中删除ID不会删除绑定在该元素上的任何处理程序(除非您使用了"事件委托").

使用.one(而不是.on过时的.bind)绑定click事件,然后在第一次触发后自动取消绑定处理程序:

$('#opener').one('click', ...)

或者在单击处理程序中禁用事件:

$('#opener').on('click', function() {
    ...
    $(this).off('click').addClass('.deactivated');
});

注:这是很好的做法,始终使用较新的.on(或.one)和.off功能,而不是.bind,或.click等,这使事件处理代码更加一致,避免了怎样的混乱.click可用于两个注册一个事件处理(不带参数)触发的事件处理程序.