.bind() 和 .unbind() 不能正常工作答案

【问题标题】：.bind() and .unbind() doesn't work properly.bind() 和 .unbind() 不能正常工作
【发布时间】：2013-01-25 23:40:14
【问题描述】：

我有两个链接，如果用户单击一个，与该链接相关的文章将显示在动画中。如果用户在单击第一个链接之后和上一个动画完成之前单击另一个链接，则他们的动画会发生冲突。我想使用.bind() 和.unbind() 函数来防止用户在其他链接的事件正在工作时点击链接。但是当我取消绑定事件时，它不会绑定到动画后的元素。

JS代码：

$("a[href='#about-enamel']").click(function () {
        $("a[href!='#about-enamel']").unbind("click");
        if ($("article[id='about-enamel']").attr('class') === 'visible') {
            $("a[href!='#about-enamel']").bind("click");
            return 0;
        }
        else if ($("article[class='visible']").length) {
            $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
                $(this).attr('class', 'hidden');
                $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                    $(this).attr('class', 'visible');
                    $("a[href!='#about-enamel']").bind("click");
                });
            });
        }
        else {
            $("article[id='about-enamel']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                $(this).attr('class', 'visible');
                $("a[href!='#about-enamel']").bind("click");
            });
        }
    });
    $("a[href='#order']").click(function () {
        $("a[href!='#order']").unbind("click");
        if ($("article[id='order']").attr('class') === 'visible') {
            $("a[href!='#order']").bind("click");
            return 0;
        }
        else if ($("article[class='visible']").length) {
            $("article[class='visible']").hide('drop', { easing: 'easeOutBack', direction: 'down' }, 500, function () {
                $(this).attr('class', 'hidden');
                $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                    $(this).attr('class', 'visible');
                    $("a[href!='#order']").bind("click");
                });
            });
        }
        else {

            $("article[id='order']").show('drop', { easing: 'easeInBack', direction: 'up' }, 500, function () {
                $(this).attr('class', 'visible');
                $("a[href!='#order']").bind("click");
            });
        }
    });

如果这个问题有其他解决方法，请告诉我。

【问题讨论】：

我认为您误解了bind 和unbind 的工作原理。您绑定一个事件 - 例如$("a[href='#about-enamel']").click(function () {}); - 然后立即解除绑定 - $("a[href!='#about-enamel']").unbind("click");。考虑在单击链接时使用stop() (api.jquery.com/stop) 清除动画队列，然后在打开另一个之前立即隐藏任何打开的article 元素。如果您可以发布 HTML，那么更全面的答案可能会更及时。
@james246 我没有在创建事件后立即取消它。我是说当触发 $("a[href='#about-enamel']") 点击事件时，任何没有 #about-enamel href（!= 符号）的元素应该从点击事件中取消。
抱歉，我没有看到!·我仍然相信您可以通过更简单的方式实现您的目标 - 通过单击事件打开使用动画的文章，但是取消任何其他正在进行的动画。
所以如果你有想法，请与我分享。
顺便说一句，您应该使用.on() 和.off() 而不是绑定。

标签： javascript jquery html bind unbind

【解决方案1】：

这是我整理的一个基本示例，说明了如何使用 stop() 来终止任何正在进行的动画，这样您就可以开始另一个动画而不会发生冲突。

http://jsfiddle.net/zFAY9/3/

【讨论】：

没问题，很高兴它有帮助