jQuery 不能选择 AJAX 元素答案

【问题标题】：jQuery can't select AJAX elementsjQuery 不能选择 AJAX 元素
【发布时间】：2023-03-29 02:06:02
【问题描述】：

我正在尝试选择页面加载后添加的页面元素。请参阅下面的前后示例。之前是页面源，之后是生成的源。由于某种原因，我无法选择已生成的任何内容。

这对我来说似乎很奇怪，因为我很确定我以前做过。

感谢您的帮助。

之前：

<div class="foo"></div>

之后：

<div class="foo">
  <div class="bar"></div>
</div>

【问题讨论】：

标签： jquery ajax

【解决方案1】：

所有这些关于 append 后绑定的 cmets 都有帮助。

但是如果你切换到 jQuery 1.3，你可以在第一次设置页面时使用“live”而不是“bind”，那么即使添加了元素，你也会得到你的事件。

http://docs.jquery.com/Events/live

【讨论】：

【解决方案2】：

当你给#auto_suggest添加一个div时，你也需要绑定事件：

$("#auto_suggest").append("<div class='off'>Blah</div>");
$("#auto_suggest div.off").hover(function() { window.alert($(this).val()); });

否则，您将使用 jQuery 1.3 及更高版本。 live() 功能将满足您的需求；例如

$("#auto_suggest div.off").live("hover", function() { window.alert($(this).val()); });

【讨论】：

如果我只想选择一个动态添加的元素来改变它的颜色，而没有要绑定的事件呢？
您有添加元素的代码吗？因此，在添加元素之前，只需设置所需的任何样式参数。

【解决方案3】：

您在创建 dom 元素之前绑定了事件，据我所知，这不起作用。相反，您可以在附加后添加绑定。不过可能还有其他解决方案。

【讨论】：

【解决方案4】：

这不太可能。我想亲自查看源代码？

否则尝试在 Firefox/Iceweasel 中使用 Firebug。 Firebug 是天赐之物——使用“控制台”选项卡——对于“查看源代码”不是完美解决方案的 ajax 密集型站点。您可以执行以下操作：

$(".foo .bar")

控制台会输出匹配元素的个数！

【讨论】：

【解决方案5】：

好的，代码如下，如果我删除底部选择器中的 div.off，我会收到测试警报，因为该元素不是生成源。

$(document).ready(function(){

$(".search_container 输入").keyup(function(){

var search; 
search = $(".search_container input").val();

if (search.length > 2){

  $.ajax({
    type: "GET", 
    url: "http://localhost:8080/search.xml",
    data: "zoom_query=" + search + "&zoom_xml=1",
    dataType: "xml",
    success: function(xml){

      $("#auto_suggest").empty(); 
      $("#auto_suggest").show();

      var _title = "";
      var _link = "";

      $("item", xml).each(function(){

        _title = $("title", this).text();
        _link = $("link", this).text();
        _context = $("zoom\\:context", this).text();

        if ($(this).length > 0){

          message = "<div class=\"off\">";
          message += "<div title='" + _context + "'>" + _title + "</div>";
          message += "<small>" + _link + "</small>";
          message += "</div>";

          $("#auto_suggest").append(message); 

        }
        else {

          $("#auto_suggest").hide();

        }

      });

    }

  });

}
else {

  $("#auto_suggest").hide();

};

});

$("#auto_suggest div.off").hover(function(){

  alert('test');

});

【讨论】：

【解决方案6】：

您需要仔细检查所有代码。 jQuery 可以访问 DOM 的所有部分，无论它们是静态的还是动态的。

我们需要查看 JavaScript 以帮助您进一步排除故障。

【讨论】：