2

我正在使用 ajax 加载 WordPress 网站上的帖子。

在每篇文章中，我都有一个带有共享按钮的隐藏 div，使用 jquery toggleClass 函数将其隐藏。

这真的很简单。

$(document).ready(function(){ 
    $(".sharing-mp").click(function() {       
      $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');
    });    
});

问题是，它不适用于使用 ajax 加载的帖子，我猜是因为它们被附加到 DOM 并且 .ready 函数找不到它们？还有其他方法吗？

4

3 回答 3

7

您需要使用 on() 为动态加载的元素绑定点击事件。您可以将事件委托给动态添加的元素的父元素或以其他方式记录。

$(document).ready(function(){ 
     $(document).on("click", ".sharing-mp", function() {     
         $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');    
     });    
});
于 2013-03-28T06:07:40.973 回答
1

您可能也只需要其中一个类。

shared-mp-hidden 和sharing-mp-visible 听起来就像它们只是彼此的对立面。所以一个会display: none;和另一个display:block;。而不是 2 个类，您可以将默认设置sharing-mp为display:block;

此外，还有一些用于显示和隐藏的 jquery 函数可以做同样的事情。

于 2013-03-28T06:12:23.603 回答
0

是的，您必须将事件委托与.on()处理程序一起使用到其父级，这在页面加载时可用。这可能是它$(document)本身，因为它是所有其他元素的父级，或者您可以尝试将事件委托给其最近的可用父级，该父级可在doc ready诸如帖子持有者 div 或内容容器等处使用。

尽管如此，这将起作用：

$(document).ready(function(){ 
    $(document).on('click', '.sharing-mp', function() {       
      $(this).toggleClass('sharing-mp-hidden sharing-mp-visible');
    });    
});
于 2013-03-28T06:21:01.660 回答