Jquery 无法选择新的 HTML 数据追加

Posted 2023-05-09

【中文标题】Jquery 无法选择新的 HTML 数据追加

【英文标题】：New HTML Data Append cannot be selected by Jquery

【发布时间】：2012-05-21 01:19:47

【问题描述】：

我附加了从 Ajax 接收的数据，它还包含一个带有 bsubmit 类的分区。 当页面加载时，如果我单击包含类 bsubmit 的 div，则会执行以下函数但是当我单击也包含类 bsubmit 的新附加数据时，则以下代码不起作用。

这里是代码

     $(function() 
    $(".bsubmit").click(function() 
    var id = $(this).parent().parent().attr("id");
    var comm= document.getElementById(id).getElementsByClassName("commentadd")[0].value;


      $.ajax(
       type: "POST",
       url: "comment.php",
       data: id:id, comm:comm,
       cache: false,
       success: function(data)
        $('.addcomment').slideUp('slow', function() 

        );

// Bottom Line not working

        $("#"+id).find(".item_comment").append(data);   // DATA Contains a div with class bsubmit
         $(data).appendTo("#"+id).find(".item_comment"); // Now these Appended Div isnt calling this function again,  Why ? I want to call them again
        $('#load').fadeOut();
      

     );


    return false;
        );


    );

【问题讨论】：

无法理解您希望重新执行的功能。

@VisioN。他认为appendTo返回父级，它没有......

你希望发生什么，不发生什么。

@gdoron 哈！你看到更新了吗？ :)

@VisioN - 当页面加载时，如果我点击包含类 bsubit 的 div，下面的函数会执行但是当我点击新的附加数据时，它也包含类 bsubmit 那么下面的代码不是工作。

【参考方案1】：

如果我理解您的问题：您是否尝试过 .on() 方法？ (jQuery 1.7)

$(yourParentElement).on('click','.bsubmit',function() 

【讨论】：

它存在三个大问题，1. on 来自 jQuery 1.7 2. document 是一个不好的地方事件 3. 它对这个人没有帮助...... :)

是的，可能我们没有一起理解这个问题。

@roko - 当页面加载时，如果我单击包含类 bsubit 的 div，则会执行以下函数但是当我单击还包含类 bsubmit 的新附加数据时，则以下代码不是工作。

@gdoron 1.6.8+ 表示：更高版本。重新编辑以更易于理解和正确。谢谢

我删除了我的反对票，因为显然你是对的，尽管前两个 cmets 仍然是正确的。

【参考方案2】：

您的问题是您将单击事件绑定到 .bsubmit 类，但该单击事件仅被攻击到文档中已有的 .bsubmit，而不是新创建的。

所以，您需要做的是，根据您的 Jquery 版本使用 live() 或 on()。

改变这一行：

$(".bsubmit").click(function() 

到

Jquery LIVE

$(".bsubmit").live("click", function() 

或

Jquery 开启

$(".bsubmit").on("click", function() 

【讨论】：

最后一个示例实际上是.bind() 方法的当今“复制品”。要使用.on() 获得.live()，您应该在'click' 之后添加目标元素。

如果不向“self”出价，则添加目标元素，但我遵循 OPs 方法，只更改解决他的问题所需的内容！

@Zuul - 你太棒了！！谢谢 :) 我的陈述有什么问题？

@AdiMathur。您在 45 分钟前从 Roco 那里得到了相同的答案，但他向您展示了 on，这比现在已弃用的 live 更好。而且这里显示的on 版本不正确。它不会创建委托事件！

【参考方案3】：

appendTo 不返回父级。

$("#"+id).find(".item_comment").append(data);   
$(data).appendTo("#"+id).parent().find(".item_comment"); // Use "parent()"
$('#load').fadeOut();

但是你真的应该缓存一些 DOM 元素...

var id = $(this).parent().parent().attr("id");

改为：

var $parent = $(this).parent().parent();

然后：

$("#"+id).find(".item_comment").append(data);

改为：

$parent.find(".item_comment").append(data);

【讨论】：

当页面加载时，如果我单击包含类 bsubit 的 div，则执行以下函数但是当我单击也包含类 bsubmit 的新附加数据时，以下代码不起作用。

@RokoC.Buljan。哇，大错特错！ :(这里有一件愚蠢的事情，可能对他的问题知之甚少的提问者选择正确答案。:(太愚蠢了！

@RokoC.Buljan。我在那里给他留言，希望他能注意到。