javascript - jQuery处理点击动态数据

Question

我有通过 jQuery 动态插入的 HTML

这是一堆我想在点击时处理的 <p> 标签。

然而，.click完全忽略了这些标签。

这是我正在尝试做的一个例子

更新

好的，点击有效，但我仍然对理论有疑问。

注意：问题是这些数据会在一段时间后进入，因为它是通过 AJAX 获取的。它也可能会改变。

因此，在示例中正确切换顺序不会在实际应用中提供解决方案。关于如何为尚未出现的元素设置点击事件的任何建议？

score 3 · Accepted Answer

您的代码几乎没有问题。首先，您要复制具有相同 id的元素，并且 id 应该是唯一的。那么您遇到的问题是因为您没有委托点击事件。当您创建新的动态元素时，之前设置的事件不会添加到新元素中。有几种方法可以使这项工作。

您可以在将元素附加到 DOM 之前缓存元素并为其添加点击事件：

var $p = $('<p class="reqImg">Random Data</p>').click(function(){ ... });
             --^-- a class not an id

或者，您可以使用最近的静态父对象上的方法附加委托on事件，在这种情况下，这就是您的包装器：

$('#wrapper').on('click', 'p.reqImg', function(){ 
  console.log('Testing for click'); 
});

score 1 · Accepted Answer

这是因为事件在元素存在之前就被绑定了。您可以尝试<p>在绑定事件之前附加标签。

score 1 · Accepted Answer

您正在将事件挂钩添加到对象上，然后创建它。制作对象后添加钩子并且它可以工作。

$('#wrapper').html('<a id="reqImg">Random Data</p> ');

$('#reqImg').click(function(){
            alert('Testing for click');
});

</p>

3 回答 3