jQuery如何将onclick事件绑定到动态添加的HTML元素上

8 浏览
0 Comments

jQuery如何将onclick事件绑定到动态添加的HTML元素上

这个问题已经在这里有了答案：

如何绑定动态创建元素上的事件？

我想在使用jQuery动态插入的元素上绑定一个onclick事件。

但是它从来没有运行绑定的函数。如果您能指出为什么这个示例不起作用，并且如何使其正常运行，我将感激不尽：

Test of click binding

 

problem: to bind a click event to an element I append via JQuery.

 

The link is created, then added here below:

 

Another is added here below:

 





编辑：我已将示例编辑为包含两个插入方法的元素。 在这种情况下，alert()调用永远不会执行。（感谢@Daff在评论中指出）

								
admin 更改状态以发布 2023年5月23日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				2
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
第一个问题是当你在一个有多个元素的jQuery集合上调用append时，会为每个元素创建一个要追加的元素的克隆，从而失去了附加的事件监听器。


另一种方法是为每个元素创建链接：




function handler() { alert('hello'); }
$('.add_to_this').append(function() {
  return $('Click here').click(handler);
})





另一个潜在的问题可能是事件监听器在元素添加到DOM之前就被附加了。我不确定这是否有什么影响，但我认为这种行为可能会被认为是不确定的。更为可靠的方法可能是：




function handler() { alert('hello'); }
$('.add_to_this').each(function() {
  var link = $('Click here');
  $(this).append(link);
  link.click(handler);
});




									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
所有这些方法都已弃用。您应该使用on方法来解决您的问题。


如果您想针对一个动态添加的元素进行操作，您必须使用




$(document).on('click', selector-to-your-element , function() {
     //code here ....
});





这将取代被弃用的.live()方法。

									

				

									

			

			
0