jQuery事件没有触发

我有3个文件：

• js_json.js – >我的json代码
• javascript.js – >我的javascript函数
• 的index.php

这里是js_json.js的代码：

 $(function(){ $('#postTitle').change(function(){ var title_id = $("#postTitle").val(); $.ajax({ type:"post", url:"proses.php", data:"title_id=" + title_id, dataType:"json", success:function(data){ body=""; //$.each(data, function(i,n){ //body = n['body']; //}); body += "Hola Test"; $(".postBody").empty(); $(".postBody").append(body); }, error:function(data){ $(".postBody").empty(); $(".postBody").append("NO Post Selected."); } }); return false; }); }); 

在这里我的javascript.js代码：

 $(function (){ $("a[name=pesan]").click(function (){ alert("holalalalalal.....!"); }); }); 

这里是index.php代码：

  //some code  Hola Test 1 Posts : 
  Select Post... <?php $sql = "SELECT id, title FROM posts ORDER BY title"; $query = mysql_query($sql) or die(mysql_error()); while($rows = mysql_fetch_array($query)){ print('' . $rows['title'] . ''); } ?>  
 Body : 
 
 Will show the body of post. 
   

我的问题是：

当我点击链接“Hola Test 1”时，它会起作用并显示消息。 问题是，在我单击选择选项后，出现“Hola Test”链接，然后单击该（“Hola Test”）链接，消息不会出现，并且firebug中没有错误…

有人可以向我解释为什么……？ 谢谢…

Answer 1

click()只会在调用click绑定页面中存在的元素的事件（对于on()没有选择器， bind()和快捷方式组中所有其他方法的绑定; keydown() ， change()等）。

因为您的其他元素稍后会通过AJAX添加，所以处理程序不受其约束。

使用.on()代替选择器，它将事件绑定到选择器匹配的所有当前和未来元素。

 $(function (){ $(document).on('click', 'a[name=pesan]', function () { alert("holalalalalal.....!"); }); }); 

由于on()是在jQuery 1.7中引入的，如果你使用的是早期版本的jQuery（就像问过这个问题时那样），你可以使用live()或delegate()而不是on;

 $(function (){ $('a[name=pesan]').live('click', function () { alert("holalalalalal.....!"); }); }); 

Answer 2

我想提一下（因为我在网上搜索的任何“事件未触发”的案例中都没有提到它）有可能会咬你。

如果您碰巧使用.remove（）从DOM中暂时提取内容然后重新插入，那么您将丢失事件。 您需要使用的是.detach（）以在重新插入后保留数据和事件。 这可能很难调试，因为一切看起来都很正常，事件调试工具充其量只是粗略的。

（就我个人而言，我会称它们为.detachAndScrubDataAndEvents（）和.detach（） ，因为我是描述性名称的粉丝，可以节省数小时的调试时间。对于那些发现.remove（）和.detach（）在语义上和有意义的尊贵名字……和平与你在一起……但你错了。）