Question

我正在使用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函数找不到它们？还有其他方法吗？

Answer 1

您需要使用on（）来绑定动态加载元素的click事件。您可以将事件委托给动态添加元素的父元素，或者以其他方式记录。

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

Answer 2

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

share-mp-hidden和sharing-mp-visible声音就像它们彼此完全相反。那么一个人会display: none;而另一个display:block;。您可以将sharing-mp的默认值设置为display:block;

，而不是2个类

此外，show和hide还有jquery函数可以做同样的事情。

Answer 3

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

尽管如此，这仍然有效：

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

document.ready没有使用ajax加载的内容

3 个答案: