jquery - 在 ajax 调用后使用 jQuery 更改 css

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 简写仅将事件处理程序绑定(bind)到当前 DOM 中存在的元素。

由于元素是动态添加的，您需要使用event delegation .

尝试

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