动态添加的网页内容 - Jquery 选择器不起作用答案

【问题标题】：Dynamically added webpage content- Jquery selector not working动态添加的网页内容 - Jquery 选择器不起作用
【发布时间】：2016-09-04 00:38:23
【问题描述】：

在文档准备功能中，我动态添加网页内容。添加此内容后，我想选择添加的元素之一，并更改宽度。但是，jquery 在 ready 函数中此时并没有选择这些新添加的元素。只有在文档准备完成后，我才能选择这些元素并使用它们。有解决办法吗？

【问题讨论】：

添加您的代码和 html，人们会帮助您解决问题。
您的问题有解决方案。但我们需要你的代码。
你可能想看看event delegation
JQuery: Selecting dynamically created elements and pushing to Firebase的可能重复
基本上，我从准备好的页面上的另一个网页加载内容，并旨在将其放入当前网页的 div 中。删除不相关的代码后，我在网页头部下面有这个功能： function loadContent() { $("#content").load("desktop.html");然后我有这个： $( document ).ready(function() { loadContent(); sizeAll(); // 这不起作用，除非我有一个点击事件，我在页面加载后通过鼠标点击触发。 }); sizeAll 函数如下所示： function sizeAll() { var newSizeWidth = $(window).width(); $("#desktop").width(newSizeWidth); }

标签： jquery dynamic

【解决方案1】：

你可以使用$(document).on('event' 'selector', function() {});代替$(document).ready(function() {});

例如：

$(document).on('click', '.added_item_class', function() { 
 $(this).hide; 
});

或

$(document).on('change', '.added_items', function() { 
 $('#item_row').text('blabla');
});

这样，您的 jQuery 就不需要加载 DOM。

如需进一步参考，您可以查看 jQuery on 方法文档 here.

编辑

试试这个；

$(document).on('change', '.desktop', function() {  
            $('#desktop').css({"width":"500"}); 
    });

【讨论】：

谢谢。有关我的进一步评论，请参见上文。

【解决方案2】：

您需要将选择放在一个函数中，并在附加数据后调用它

【讨论】：

不需要这个，这应该是评论而不是答案

【解决方案3】：

以这种方式使用ajax/get/post/调用：

$.get("somepage.html", function(data) {
  // Use "data" this way
  $(data).find("anySelector");
  // And set correct type, just for sure
}, "html");

【讨论】：

【解决方案4】：

按照贡献者的建议尝试了多种方法，但没有一个奏效。找到了一个解决方案 - 当内容从“desktop.html”页面加载到 div id="内容" 在当前网页中，我将调整宽度函数放在完成处理程序中。见下文： $( "#content" ).load( "desktop.html", function() { 大小所有（）； // 调整大小的函数代码放在这里 });

【讨论】：