Question

我这样做：

jQuery("#foto").click(function() {
 setTimeout(function () { 
  jQuery(".mfp-iframe").delay(0).css({"width":"80%", "height":"89%", "top":"40px"});
 }, 500);
});

它可以工作但是当我用ajax调用更多项目时（无限滚动加载更多项目）这不适用于ID为#foto的新项目，我知道为什么，但我需要一个提示或方法，以便在每次需要时将此点击功能应用于新项目。

请帮忙。

Answer 1

首先，您不能对同一文档中的多个元素使用相同的id - 而是使用类名，例如：.foto。

click简写只是将事件处理程序绑定到DOM中存在的元素。

由于项目是动态添加的，因此您需要使用event delegation。

试

jQuery(document).on('click','.foto',function() {
 setTimeout(function () { 
  jQuery(".mfp-iframe").delay(0).css({"width":"80%", "height":"89%", "top":"40px"});
 }, 500);
});

Answer 2

您需要对新创建的元素使用.on。

但是您不能对多个元素使用相同的id，因此请将其更改为某个类，如下所示：

assigne id="foto"表示您要为其调用点击功能的所有元素。

jQuery(document).on("click",".foto",function() {
     setTimeout(function () { 
      jQuery(".mfp-iframe").delay(0).css({"width":"80%", "height":"89%", "top":"40px"});
     }, 500);
    });

Answer 3

我认为需要一个帖子ajax重新绑定：

包装一个函数并在ajax成功时调用它：

var photoClick = function(){jQuery("#foto").click(function() {
 setTimeout(function () { 
  jQuery(".mfp-iframe").delay(0).css({"width":"80%", "height":"89%", "top":"40px"});
 }, 500);
});
};

发布Ajax成功：

success: function(data) {
    elem.replaceWith(data);
    photoClick();
}

ajax调用后用jQuery更改css

3 个答案: