Hey，这个问题我碰到过好多次了，典型的动态DOM元素事件绑定坑，我给你理清楚原因和解决办法：

你遇到的核心问题是动态加载元素的事件绑定时机不对。

当你在$(document).ready()里直接给元素绑定点击事件（比如$('.clickable-img').click(...)）时，这段代码只会在页面初始DOM渲染完成后执行一次，它只会给当时已经存在于DOM树中的元素绑定事件。而你用.load()加载的<img>是在这之后才被插入到页面里的，自然没被绑定到事件，所以点击毫无反应。

方法1：事件委托（推荐） #

利用事件冒泡的特性，把事件绑定到一个一开始就存在于页面的父元素（比如加载目标的容器，甚至body/document）上，让它监听子元素的事件。这样不管元素是初始就有还是后来动态加载的，只要匹配选择器，事件就能被触发。

示例代码：

// 找一个离目标元素最近的、初始就存在的父容器，比如#loaded-content
$('#loaded-content').on('click', '.clickable-img', function() {
  // 这里写你的点击逻辑
  alert('图片被点击啦！');
});

小贴士：尽量不要绑定到document，选择更接近的父容器能减少事件冒泡的开销，提升性能。

方法2：在.load()回调里绑定事件 #

.load()方法支持传入回调函数，这个函数会在HTML内容完全加载并插入到DOM之后执行。你可以把事件绑定的代码放在这个回调里，确保绑定的时候目标元素已经存在。

示例代码：

// 加载指定内容到目标容器
$('#loaded-content').load('your-source-page.html .img-container', function() {
  // 此时新元素已经在DOM里了，直接绑定事件
  $('.clickable-img').click(function() {
    alert('图片被点击啦！');
  });
});

• 如果用了事件委托，就不需要再在回调里绑定事件了，否则会导致同一事件被多次绑定，触发多次逻辑。
• 检查一下你的选择器是否正确，确保能精准匹配到加载后的<img>元素。

内容的提问来源于stack exchange，提问作者Samuel