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

Posted 2023-05-09

【中文标题】Jquery 选择器不适用于动态 .get 加载的内容

【英文标题】：Jquery selector not working with dynamic .get loaded content

【发布时间】：2015-04-06 02:06:30

【问题描述】：

我有一个页面，该页面通过单击按钮通过 .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");
);

【参考方案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');
   
);