JQuery 无法确定从 ajax 打印的 div 类

Question

我有使用 smarty 引擎在 html 页面中打印的 html 元素，然后从 jquery 打印

smarty 打印出来的 html 是

<div id="broadcastsXXX" class="broadcast orginal-broadcast highlightedbroadcast">
   <i class="dogears"></i>
   <div class="content">
   ...
   ...
   </div>
</div>

并且从 jquery 打印的 html 与从 smarty 模板打印的 html 代码相同，如上所示。

当有人点击上面显示的类“content”的div时，我想删除css类“highlightedbroadcast”

所以我做 jquery 代码：

 $(document).ready(function() {
    $('.content').click(function() {        
       $(this).parent().removeClass("highlightedbroadcast");
       var broadcastid = ($(this).parent().attr("id"));
    });   
 });

该函数正在更改单击的 div 父级并删除该类 highlightbroadcast。

当用户单击从 smarty 模板打印的 .content div 时，当页面丢失时，删除突出显示的 css 类没有任何问题。但是如果用户点击了从 ajax 打印出来的 div .content ，它不会删除该类并且什么也不做。

我尝试将 alert('hi') 添加到函数中，当用户单击来自 smarty 的 .content div 时，它也会显示 hi，并注意用户单击从 ajax 打印的 div 时.

注意，broadcastsXXX 是动态的，如 broadcasts123 broadcasts124 .. etc

这是一个真实的例子http://jsfiddle.net/samshannaq/FUK5Z/2/

那么有什么解决办法吗？

Answer 1

.click() 只会将事件处理程序添加到当前 DOM。

如果您希望 jQuery 事件也适用于随后通过 AJAX 加载的任何 HTML，您需要使用 .on() event handler 而不是 .click()：

 $(document).ready(function() {
    $('body').on('click', '.content', function() {        
       $(this).parent().removeClass("highlightedbroadcast");
       var broadcastid = ($(this).parent().attr("id"));
    });   
 });

要么这样，要么您需要在每次 AJAX 调用后将点击事件添加到通过 AJAX 加载的 HTML。

Answer 2

我认为您应该使用 'live'，而不仅仅是 'bind' 或 'click' 。当文档准备好时， div.content 根本不会呈现（它们是通过 ajax 响应呈现的。）。所以把你的代码改成

$(document).ready(function() {
  $('.content').live('click',function() {        
   $(this).parent().removeClass("highlightedbroadcast");
   var broadcastid = ($(this).parent().attr("id"));
  });   
});

可能会起作用。