在.detach()和.append()之后使用.detach()不按预期工作

Question

在我的Javascript中使用.load()方法有困难，它在页面加载时运行良好，但是当我分离相应的元素并再次追加它之后，该方法就不再起作用了。您可以在下面看到我的代码：

<script type="text/javascript">

(function () {

    var div = $('#exhibitions');
    var max = @Model.Total;
    var count = 0;

    div.find('.show-more').click(function () {
        div.find('.more-exhi').hide().load('@Url.Action("Exhibitions", "Exhibition")', { year: $(this).attr('data-year') } ).fadeIn('1500');
        div.find('.show-less').show();
        $('.more-exhi').attr('class', 'less-exhi');
        count++;
        if (count == max) {
            div.find('.show-more').hide().detach().hide();
        }
    });

    div.find('.show-less').click(function () {
        var button = div.find('button.show-more').detach();

        div.find('.more-exhi').fadeOut('1500');
        div.find('.less-exhi').fadeOut('1500');
        div.find('.show-less').hide();
        div.find('.holder').append(button);
        div.find('.show-more').attr('data-year', '@DateTime.Now.Year');
    });

})();
</script>

我使用了调试器，但就调试而言:没有错误，一切都应该正常工作。但是，当我跨出正在加载新内容的部分代码(第10行)时，没有向页面添加任何内容(不过，我确信load()方法具有有效的内容调用)。

我知道事件可以工作，因为这个函数中的其他方法仍然正常工作。我怎样才能解决这个问题？

Answer 1

在第一次处理单击时，通过执行以下操作，可以将所有具有more-exhi类的元素上的所有类替换为less-exhi：

$('.more-exhi').attr('class', 'less-exhi');

然后...and就再也不会把more-exhi放回别处了。因此，在随后的单击中，这一行将变成无操作：

div.find('.more-exhi').hide().load('@Url.Action("Exhibitions", "Exhibition")', { year: $(this).attr('data-year') } ).fadeIn('1500');

...since div.find('.more-exhi')找不到任何元素。