Javascript - 在 HTML 对象上模拟 document.ready()
我有一个主站点 A,我使用 AJAX 从子站点 B 加载内容。有一个 jQuery 文件可以更改站点 A 上的元素(向它们添加事件、类,如果需要则重新呈现它们等)。在 document.ready() 上启动
现在我需要将内容从站点 B 加载到站点 A 中。我使用一个函数来完成此操作:
$.get("/some/url/",{},function(e){
$(".some_div").html(e);
});
问题是,如果我在站点 B 中包含 jQuery,则会发生以下情况: jQuery 加载内容,将其放入站点A然后触发所有在其中获取的脚本。这会导致网站重新渲染和一大堆混乱。
我需要做的是在 HTML 对象 e 从站点 B 中拉出之后但在将其附加到站点 A(因此我将重新渲染 HTML 代码,并准备好所有事件、类和侦听器)。
I have a main site A onto which I load content with AJAX from sub-site B. There is a jQuery file that alters elements on the site A (adds events to them, classes, re-renders them if needed etc) that is being launched on document.ready()
Now I need to load content from site B into site A. I do it with a function:
$.get("/some/url/",{},function(e){
$(".some_div").html(e);
});
The problem is if I include jQuery in site B, the following happens: jQuery loads the content, puts it into site A and then triggers all the scripts that were fetched within it. Which causes re-render of the site and whole lot of mess.
What I need to do is to emulate the document.ready() on the HTML object e right after it was pulled out of the site B but before it is appended to the site A (so I will have re-rendered HTML code with all events, classes and listeners ready).
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
难道你不能把你的代码放在函数中,并在调用之前运行你的东西吗:
就在该行上方,b 中的所有 html 都已准备就绪,但尚未加载或运行。或者你的意思是你想放入 html 而不是脚本?只需使用 jquery 函数删除脚本标签(执行
e.find('script').appendTo(new_div);
)。或者在b中添加一些代码。在 b 中创建一个名为
init()
的函数来调用所有内容。其他一切都在函数中,没有任何运行。当您准备好时,调用init()
。Can't you just put your code in the function, and run your stuff before calling:
Just above that line all the html from b is ready but not loaded or run. Or do you mean you want to put in the html and not the scripts? Just use the jquery function to strip out script tags (do
e.find('script').appendTo(new_div);
).Or add some code in b. Make a function called
init()
in b that calls everything. Everything else is in functions and nothing runs. When you are ready callinit()
.因此,经过一些研究和花时间解决这个问题后,我找到了解决方案。
在 jQuery 1.4 中引入了一个方法 .live() 。问题是它仅适用于用户与 UI 的直接交互(即 click()、hover() 方法等)。它不适用于 .each() 等方法,也不适用于第三方插件引入的方法(例如 .accordion()、.tabs()、.datatable() 等。
所以当我决定扩展时我自己发现了一个名为 livequery 的精彩库。很好,所以你不应该有任何问题弄清楚它是如何工作的。它解决了我的问题,因此案件已经结束
(将其发布在这里,这样如果有人偶然发现类似的问题,他会找到答案)。
So after some research and time spent on this problem I've found a solution.
In jQuery 1.4 there was a method .live() introduced. The problem is it works only on direct user interactions with UI (i.e. click(), hover() methods etc.). It wont work in methods such as .each() and it wont work with methods that are introduced by third party plugins (such as .accordion(), .tabs(), .datatable() etc.
So right when I decided to extend .live() method on my own I found a wonderful library called livequery. Documentation to it is really good so you shouldn't have any problems figuring out how it works. It solved my problem and thus the case is closed.
(Posting it here so if someone stumbles across similar problem he will find an answer)