点击新添加的链接不执行javascriptfunction

在尝试使用jquery时，我创建了这个html和javascript。

 
 
 8 : This is supposed to be a toaster. 
 14 : with a toaster maybe. 
 51 : If we're really creative. 
 
 
  Remove  Add  

javascript有一个弹出包含链接文本的消息的function。它还有一个函数来添加一些链接到div。一个名为remove的函数删除内部div。

 $(document).ready(function(){ $('.mylinkclass').click(function(){ getLinkText(this); }); $('#remove').click(function(){ removeContents(); }); $('#add').click(function(){ addContents(); }); }); function getLinkText(that){ var txt = $(that).text(); var num = parseInt(txt); alert('num='+num); return false; } function addContents(){ $('#results').append('70 new line1 
'); $('#results').append('77 new line2
'); } function removeContents(){ $('.mylinkdiv').remove(); } 

当我点击原始html页面中的链接（即3个链接）时，会弹出警告框。

当我单击添加按钮时，它会向div添加两个新链接。但是， 当我点击这些新添加的链接时，警报不会弹出！

我无法理解为什么……有人能告诉我吗？

Answer 1

如果您使用的是jQuery 1.7，则使用.on，如果您使用的是jQuery 1.6，则使用.delegate

 jQuery('#results').on('click','.mylinkclass',function() { getLinkText(this); }); 

演示

另一种方法是克隆现有元素Demo

 var cloned = jQuery('.mylinkclass:last').clone(true); jQuery('#results').append(cloned); 

在第二种情况下，事件监听器也将被复制，您不需要使用.on或.delegate。

Answer 2

您需要一个委托事件处理程序，因为您的项目是在dom加载后动态创建的。

 $('#results').on('click', '.mylinkclass', function() { getLinkText(this); }); 

Answer 3

在第一次加载页面后添加链接到DOM时，链接不会绑定到jQuery事件。 你应该使用：

 $(document).on('click', '.mylinkclass', function() { }); 

当我第一次遇到这个问题时，我正在使用“live（）”，但你不应该使用它，因为它根据jQuery文档被弃用了。

Answer 4

你必须这样做：

 $ ('. mylinkclass'). live ('click', function () { alert ('OK') });