我在 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() 方法具有有效的内容调用)。
我知道该事件有效,因为该函数中的其他方法仍然正常工作。我该如何解决这个问题?
最佳答案
第一次处理点击时,您可以通过执行以下操作将任何具有 more-exhi
类的元素上的所有类完全替换为 less-exhi
:
$('.more-exhi').attr('class', 'less-exhi');
...然后永远不要将 more-exhi
放回其他地方。因此,在后续点击中,此行将变为无操作:
div.find('.more-exhi').hide().load('@Url.Action("Exhibitions", "Exhibition")', { year: $(this).attr('data-year') } ).fadeIn('1500');
...因为 div.find('.more-exhi')
找不到任何元素。
关于javascript - 在 .detach() 和 .append() 之后使用 .load() 未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27686426/