Jquery 选择器不适用于动态 .get 加载的内容答案

【问题标题】：Jquery selector not working with dynamic .get loaded contentJquery 选择器不适用于动态 .get 加载的内容
【发布时间】：2023-03-11 04:30:01
【问题描述】：

我有一个页面，该页面通过单击按钮通过 .get 请求动态加载内容。加载的 HTML 页面我无法获得任何 jquery 选择器来定位该页面上的任何内容。我尝试将警报脚本放在加载的页面上，但没有成功。

我认为正在发生的事情是当页面加载时，我试图定位的内容不存在，并且在加载页面时它不会再次检查？这只是我的猜测，任何帮助将不胜感激。

这是页面内容动态加载到主页的位置。

$(".load-page").click( function(){
    var href = $(this).attr("data-href");
    $.get(href,function (hdisplayed) {
      $("#content").html( hdisplayed );
    });
});

这是我用来选择页面内容的方法。

$(function() {
    $("#div").click(function(){
    alert("hello");
});

【问题讨论】：

标签： jquery html jquery-selectors selector

【解决方案1】：

尝试使用实时处理程序：

$(document).on('click', '#div', function() {
    alert("hello");
});

它绑定到文档并处理动态添加的内容，而.click() 绑定到调用.click() 时已经存在的确切元素。

另请参阅详细的documentation jQuery 的on() 方法。

【讨论】：

天哪，非常感谢。整天都在研究这个问题，并一直认为我的选择器早些时候都搞砸了。这更有意义

【解决方案2】：

您想使用 .on() 将附加到动态添加的元素。

$(function() {
  $("body").on('click', '#div', function() {
     alert("hello");
  });
});

另外，不要用 div 或 span 或其他元素名称给元素 id，这是不好的做法。我建议使用目标类选择器而不是 id，特别是对于动态生成的内容。另外，我将 body 设置为您的目标，因为我不确定您的代码结构是什么（您的 #div 元素在哪里）

【讨论】：

【解决方案3】：

事件处理程序将与父元素上的“.on”竞标一起使用。但如果您只需要选择动态加载的元素进行其他操作，则需要等待内容实际加载。

$('#parent_element').load(
   url, //url for the AJAX request
   {}, //data to be sent with the request
   function(){ //this function will be called when content has loaded
       $('#dynamic_child_element').css('background','#000');
   }
);

【讨论】：