Question

我有一个展开/折叠块，我已经为此编写了一个函数：

function expandCollapse() {
    var $btnShowHide = $('.btn-show-hide');
    var $contentShowHide = $('.content-show-hide');

    contentToggle();

    $btnShowHide.each(function() {
        $(this).on('click', function() {
            var i = $btnShowHide.index(this);
            $contentShowHide.eq(i).slideToggle('fast');
            $contentShowHide.eq(i).toggleClass('collapsed');

            if ($contentShowHide.eq(i).hasClass('collapsed')) {
                $('.icon-show-hide', this).text('+');
            } else {
                $('.icon-show-hide', this).text('-');
            }
        });
    });

    function contentToggle() {
        $contentShowHide.each(function() {
            var i = $contentShowHide.index(this);
            if ($(this).hasClass('collapsed')) {
                $(this).hide();
                $('.icon-show-hide', $btnShowHide.eq(i)).text('+');
            } else {
                $('.icon-show-hide', $btnShowHide.eq(i)).text('-');
            }
        });
    }
}

我在$(document).ready上调用此函数。这工作正常但在页面中完成ajax调用时失败。所以，我查看了这个answer并在ajax成功时再次调用了该函数，但是这使得行为变得奇怪（比如，单击btn一次就会崩溃，并且只需单击就可以多次展开内容）。关于我如何解决这个问题的任何想法？

示例HTML（一页上可能有多个）：

<h3 class="btn-show-hide">
 <span class="icon-show-hide"></span>
 <span>Title</span>
</h3>
<div class="content-show-hide collapsed">
//Stuff
</div>

Answer 1

显然，解决方案是在听取事件之前设置off。所以，它只是

 $btnShowHide.each(function() {
        $(this).off('click').on('click', function() {
            var i = $btnShowHide.index(this);
            $contentShowHide.eq(i).slideToggle('fast');
            $contentShowHide.eq(i).toggleClass('collapsed');

            if ($contentShowHide.eq(i).hasClass('collapsed')) {
                $('.icon-show-hide', this).text('+');
            } else {
                $('.icon-show-hide', this).text('-');
            }
        });
    });

这解决了我的问题，但我不知道为什么会这样。

Answer 2

除非您在每次调用$('.btn-show-hide');之前删除/替换$('.content-show-hide');和expandCollapse()的所有实例，否则您一遍又一遍地重新添加相同的事件处理程序，我怀疑是多重崩溃/扩张的原因。

$btnShowHide.each(function() {
        $(this).on('click', function() {
            var i = $btnShowHide.index(this);
            $contentShowHide.eq(i).slideToggle('fast');
            $contentShowHide.eq(i).toggleClass('collapsed');

            if ($contentShowHide.eq(i).hasClass('collapsed')) {
                $('.icon-show-hide', this).text('+');
            } else {
                $('.icon-show-hide', this).text('-');
            }
        });
    });

上面的代码每次调用expandCollapse()时都会添加一个新的事件处理程序，也许它应该放在这个函数之外并且只执行一次......

ajax调用后，jQuery事件将无效

2 个答案: