.on（'click'）带有通配符，但未按预期委托

Question

会尽量保持这个简单，所以不要太多阅读

我有一个简单的页面，包括以下内容......

$divid = 'append_here_$x;
$clickme = 'click_$x';

<div id='$clickme'>Click Me</div>

<div id='$divid'></div>

然后，我有一个单独的php文件，在while循环中构建内容，为每个div生成一个唯一的id。

while ...
   $imgid = 'imgid_$z'  ...
   <div id='$imgid'>This was appended</div>

最后，我有这个只是为了测试和保持简短

$( "[id^='imgid_']").on( "click", function() {
  alert('you clicked me');
});

以上内容在大多数情况下都能正常工作。如果您单击我，它将执行ajax调用并对其中包含while循环的文件发布帖子，返回数据并将其附加到append_here_ div中。问题是新的附加数据也有一个id，所以你可以点击它不会响应简单的点击。

Answer 1

将click事件链接到页面元素的方式对以后添加的元素不起作用。您将事件链接到定义单击事件时存在的元素，但如果稍后添加项目，它们将不会有事件。你可以这样做：

$(document).on('click', '[id^="imgid_"]', function() {
  alert('you clicked me');
});

这样，事件将出现在启动时出现的文档中，每次单击时，它都会检查选择器（第二个参数），因此新元素将响应单击。