Question

我正在研究一些ajax分页。我使用以下代码：

jQuery(function($) {
$('#content').on('click', '.woocommerce-pagination a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $('#content').fadeOut(200, function(){
        $(this).load(link + ' #content', function() {

            $(this).fadeIn(200);
            $('.products li').css("width","21.05%");
            $('#content').css("width","70%");
        });
    });
});
});

这可以正常工作，但出于某种原因，它在原始的#content div中添加了#content。当我查看源代码时，它看起来像这样：

<div id="content" role="main" style="display: block; width: 70%;">
<div id="content" role="main">
</div>
</div>

任何人都可以看到问题所在吗？

Answer 1

$(this).load(link + ' #content'...

你说加载http://...... #content内的任何内容到我所在网站上的#content。您可以添加包含内容的包装器以避免此类行为。

Answer 2

我认为这是问题

$(this).load(link + ' #content', function() {

我认为您要从网页 #content 中的链接加载 #content

这意味着第二个#content是从链接加载的，你应该加载它的内容

Answer 3

添加一个包装器，更好地使用参考变量，这是我的拇指规则，以避免这样的错误，如果它在你的头脑中，可能真的会浪费你的时间....

jquery添加重复元素

3 个答案: