0

我有使用 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 时，页面 loas 删除 highlightbroadcast css 类没有任何问题。但是如果用户点击了从 ajax 打印出来的 div .content ，它不会删除该类并且什么也不做。

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

请注意，broadcastsXXX 是动态的，因为 broadcasts123 broadcasts124 .. etc

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

那么有什么解决方案吗？

4

2 回答 2

1

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

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

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

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

于 2013-05-16T01:43:31.513 回答
-1

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

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

可能工作。

于 2013-05-16T01:44:30.627 回答