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

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');    
     });    
});