jQuery-用于切换内容的自定义插件

Question

我刚刚做了我的第一个jQuery插件，它隐藏了太长的内容。

您可以在http://jsfiddle.net/denislexic/bT4dH/6/查看小提琴。

当您将其签出并单击“ ...”时，您会注意到第一个切换了三次，第二个切换了两次，第三个是正确的（所以只有一次）。

我不知道为什么要这么做。 我尝试了e.preventDefault() ， stopPropagation()等。似乎没有任何反应。

这是似乎是问题的代码：

 $("." + opts.clickZoneClass).on("click", function (e) {
    _debugger(1);

    var element = $(this).parent('div').children('div.status');

    // I know you can use is(':visible'), but it doesn't work in Internet Explorer 8 somehow...
    if (element.hasClass('open')) {
        _debugger(2);
        element.animate({
            height:element.attr('data-toggle')
        }, 'fast');
        //$(this).html();
        element.removeClass('open');
    } else {
        _debugger(3);
        element.animate({
            height:element.attr('data-height')
        }, 'fast');
        element.addClass('open');
    }
    return false;
});

Answer 1

这是因为您正在$ .each循环中执行上述代码。 如果您拔出绑定代码并在插件运行良好后就运行它。

我只是将其拉出，然后将其移至文档准备功能以进行说明。

http://jsfiddle.net/bT4dH/10/

Answer 2

我猜想在迭代元素时，click事件绑定了多个。 要解决这个问题，只需在单击即添加一个unbind方法，即

$("." + opts.clickZoneClass).unbind().on("click", function (e) {
    // existing stuff
});

这样可以解决您的问题。