Jquery 选择器无法使用动态 .get 加载的内容

Question

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

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

这是页面内容动态加载到主页的地方。

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

这就是我用来 select 页面内容的方法。

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

Answer 1

尝试使用实时处理程序：

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

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

jQuery的on()方法详见documentation。

Answer 2

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

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

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

Answer 3

事件处理程序将使用父元素上的“.on”出价。但是如果你只需要select动态加载的元素进行一些其他操作，你需要等待内容真正加载。

$('#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');
   }
);

Jquery 选择器无法使用动态 .get 加载的内容

Jquery selector not working with dynamic .get loaded content

jquery

html

jquery-selectors

selector