点击 #id 后移除 jQuery 事件（或防止第二次点击）

Question

大家好！

我正在尽力解决以下问题，但经过多个小时的努力，我仍然无法找到正确的解决方法！让我来解释一下：

• 我有一个a-href元素（#opener），当它被点击时，会触发一个jQueryUI模态对话框，该对话框通过ajax在一个div（#target）中加载URL。
• 一切都很完美，但我希望这只发生一次！
• 在加载模态窗口后，我能够给我的#opener a-href设置一个类（.deactivated），并删除id（#opener）以防止再次触发操作，但是它并不起作用...a-href仍然可以点击，并且每次点击都会打开模态窗口（#target）！
• 我唯一找到的解决方案是完全从DOM中删除a-href --- 使用$(this).fadeOut(); ---，但这真的很丑陋，因为我的链接#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');
    });
});

- Cospefogo

---

规则：保存以备重复使用 - 使用 开/关；仅使用一次且永不再用 - 使用 一个 函数。 - Mark Schultheiss

Answer 1

从元素中删除ID不会删除绑定在该元素上的任何处理程序（除非您使用了“事件委托”）。

或者使用.one在单击事件上进行绑定（而不是.on或过时的.bind），然后在处理程序触发一次后自动解除绑定：

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

或者在点击处理程序内禁用事件：

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

注意：在it技术中，我们建议始终使用较新的.on（或.one）和.off函数，而不是.bind或.click等。这样可以使事件处理代码更加一致，并避免.click会被用于注册事件处理程序或（没有参数时）触发事件处理程序的混淆。

- Alnitak

---

亲爱的Alnitak！非常感谢您提供如此详细的帮助。问题已经解决了！我使用PHP并开始学习jQuery，您的帮助非常有教育意义。最好的问候！ - Cospefogo

如果需要的话，您也可以在one内设置停用。 - Mark Schultheiss

你好，但是如何重新激活按钮呢？例如，当点击其他元素时，#opener将被激活以再次进行点击？ - Szymon

Answer 2

描述

.one()，为元素附加事件处理程序。该处理程序每个元素最多执行一次。

$('#opener').one('click',function(){
     //your code
    });

- sasi

---

非常感谢！我为自己没有找到如此明显的答案感到惭愧... - Cospefogo

Answer 3

你可以使用.one()函数来设置一个事件处理程序，它只会触发一次，然后自行删除：

$('#opener').one('click', function(event) {
    // your code here
});

- Anthony Grist

Answer 4

使用One:

$('#opener').one("click", function() {

});

http://api.jquery.com/one/

- Darren