Question

我这里有两个HTML。第一个是由php动态生成的，第二个是html来测试。

我也有以下jquery。

当我在第二个（普通html）中单击带有类删除的十字架时，它可以很好地工作。但是当我点击第一个十字架时，它不起作用。它最后用＃重定向到主页。

我希望有人指出我做错了什么。

提前感谢。

HTML

First part (dyanmicall generated)
<ul style="display: block;" id="message">
<li class="41">
<span class="user"><strong>shin</strong></span>
<span class="msg">  delete this as well</span>
<span class="date">2010-01-15 07:47:31</span>
<a href="#" id="41" class="delete">x</a>
    <div class="clear"></div></li>
<li class="40">
<span class="user"><strong>shin</strong></span>

<span class="msg">  delete me as well</span>
<span class="date">2010-01-14 16:01:44</span>
<a href="#" id="40" class="delete">x</a>
    <div class="clear"></div></li>
...
...</ul>


Second part which is plain html
    <ul id="another">
    <li><a href="#">you can't delete me</a></li>
    <li><a href="#" class="delete">delete this</a></li>
    <li><a href="#" class="delete">delete this</a></li>
    </ul>

这是jquery

$(".delete").click(function(event) {
    event.preventDefault();


loading.fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
// var string = 'id='+ id ;

$.ajax({
   type: "POST",
   url: "index.php/admin/messages/changestatus/"+id,
   // data: string,
   cache: false,
   success: function(){
    commentContainer.slideUp('slow', function() {$(this).remove();});
    loading.fadeOut();
  }

 });


return false;
    });

我顺便使用CodeIgniter。

Answer 1

执行此操作时：$(".delete").click(handler);您正在做的是查找当时存在的所有class="delete" 并将点击处理程序绑定到它们，但这些是动态的那么就不存在了，所以他们永远不会得到那个处理程序。

要解决此问题，请使用以不同方式处理事件的.live()，它位于DOM的根目录，等待click冒泡，如果点击的目标匹配选择器，然后处理程序执行...新旧元素以相同的方式冒泡，所以在添加它时并不关心：）

要使用.live()，只需将其替换为：

$(".delete").click(function(event) {

有了这个：

$(".delete").live('click', function(event) {

Answer 2

您的代码看起来应该可以正常工作。这意味着可能会发生以下几件事之一：

您没有正确加载jQuery，或者正在加载，但您的代码不在document.ready函数中。
其他一项未定义（如loading），因此抛出了JS错误，导致整个点击事件失败。

尝试单击打开Firebug的链接，查看单击链接时是否抛出了JS错误。

无法删除使用jquery动态创建的列表

2 个答案: