Question

我正在使用带有wordpress的buddypress。我正在使用一些jQuery和一些按钮来根据类来显示/隐藏某些表行。当按下分页按钮（即第2页或第3页等）时，buddypress使用ajax来填充用户行的下一页。

我试图在这个ajax完成之后运行我的隐藏代码以保持隐藏的东西我想要的东西。

function keepCatOnPaginate () {
    $ = jQuery;

    $('.pagination-links a').click(function() {
        console.log('clicked');
        $(document).ajaxStop(function () {
            $(document).ready(function(){
                console.log('ajax stopped, hiding stuff');
                var id = $('#buddypress .nav-tabs li.active a').attr('id');
                console.log('#members-list tbody tr.'+id);
                console.log($('#members-list tbody tr.'+id));
                console.log($('#members-list tbody tr').not('.'+id));
                $('#members-list tbody tr.'+id).show();
                $('#members-list tbody tr').not('.'+id).hide();
            });
        });
    });
}

一切似乎都有效，控制台日志会在正确的时间发生。我得到了最后两个控制台日志的jQuery元素列表，正如我所期望的那样。然而，最后2次调用实际上.show（）和.hide（）只是没有做任何事情。没有隐藏或显示任何元素。即使我将.hide（）或.show（）更改为.css（'background'，'red'）之类的东西，仍然没有任何反应。

如果我复制并粘贴console.log的输出（'＃members-list tbody tr。'+ id）;作为.hide（）或.show（）或其他任何东西的选择器，这些元素似乎没有受到影响。

我看不出我在这里做错了什么。任何帮助将不胜感激。欢呼声。

Answer 1

这是一个猜测，因为你遗漏了你正在做的更重要的部分（这里没有显示ajax调用，这里没有显示动态加载的内容，也没有显示HTML）。

但是，我猜你正在做一个ajax调用，然后尝试动态加载一些内容，然后加载内容后，你想隐藏/显示一些东西。

如果是这种情况，那么您应该将此代码放在ajax调用的成功处理程序的末尾，而不是放在.ajaxStop()处理程序中，当然不能放在$(document).ready()处理程序中。< / p>

为了进一步帮助您，我们需要查看您要定位的标记以及所涉及的ajax调用，并了解您是否动态插入任何HTML。

此外，您可以解释您尝试使用此代码执行的操作。您是否尝试获取id值，然后将其用作类名？

如果这里根本没有涉及ajax，你只是在选项卡上点击一下，那么你的代码可能应该是这样的：

$('.pagination-links a').click(function() {
    // get active id
    var id = $('#buddypress .nav-tabs li.active a').attr('id');
    // hide all except the one who's class matches the active id
    $('#members-list tbody tr').hide().filter('.' + id).show();
});

Answer 2

没有这样的功能可以为动态添加它。唯一的方法是，将css规则动态添加到正文中/创建一个新的样式表。

例如：

$("<style>").text("#newId { width:20px; height:30px; }").appendTo("head");

Answer 3

ajaxStop()未考虑success回调中触发的代码。因此，当ajax请求本身完成时，将新内容注入DOM的代码仍在运行，因此hide()和show()调用在注入新内容之前运行。

添加一些内容以检查是否有新内容，或将hide和show方法包装在setTimeout中。

jQuery不会影响ajax调用后的元素

3 个答案: