ajax后执行document.ready后
我有一个custom.js文件,其中有几个元素有点击和其他方法绑定到他们。整个文件封装在document.ready()中,一切正常。但是,当我做了一个AJAX的帖子显然document.ready()永远不会再次为当前页面启动。无论如何,我可以让document.ready()再次触发,还是需要让命名函数中的所有内容都调用它们,形成我的create.js.erb?ajax后执行document.ready后
您可以随时将所有内容放在一个函数中(名为loadfunction或其他东西),并在文档加载时调用该函数,并在加载ajax时再次调用该函数。虽然它是一个黑客入侵的解决方案,但它应该工作得很好。
所以后来采取一切$(document).onready(function() {
和尾架}
之间并把它与function OnloadFunction() {
结束}
。 然后把$document.onready(OnloadFunction);
例: 你有
$(document).ready(function() {alert("test");});
它会变成:
function OnloadFunction()
{
alert("test");
}
$(document).ready(OnloadFunction);
然后就可以调用OnloadFunction
只要你想。
把代码放在单词上,就像'$(document).ready(function DocReady(){...});' – 2011-04-10 08:06:32
看看已编辑过的帖子;) – Ben 2011-04-10 18:06:47
好的工作! :-) – 2011-04-10 20:19:22
我已经成功地使用类似以下的模式:
首先,我们必须定义一个.query()插件。
// jQuery.fn.query() emulates the behavior of .querySelectorAll()
// by allowing a full/complex selector to be matched against
//a small slice of the dom.
$.fn.query = function (selector) {
var scopeElms = this,
scopeIsDoc = scopeElms.length === 1 && scopeElms.is('html') ,
// check for obviously simple selectors.... (needs more elegance)
isComplexSelector = /\s/.test(selector.replace(/\s*([|~*$\^!]?=|,)\s*/g, '$1')),
elms;
if (scopeIsDoc || isComplexSelector)
{
elms = $(selector);
if (scopeElms[0])
{
elms = elms.filter(function(){
var i = scopeElms.length;
while (i--) {
if (scopeElms[i] === this || $.contains(scopeElms[i], this))
{
return true;
}
}
return false;
});
}
}
else
{
elms = scopeElms.filter(selector)
.add(scopeElms.find(selector));
}
return $(elms);
};
然后我们写我们的初始化函数,并将其绑定到“准备就绪”事件,也给我们定制“domupdated”事件。在我们使用.query()
发现无论从整个文档或只是更新片段元素的初始化函数...
// Here we define our DOM initializations
$(document).bind('ready domupdated', function (e, updatedFragment) {
var root = $(updatedFragment || 'html');
// Begin imaginary initialization routines
root.query('form').validate();
root.query('.sidebar .searchform input#search').autocomplete();
// etc...
});
然后,每当我们注入新的元素块到DOM(比如当一个Ajax请求已完成)我们再触发domupdated
事件,然后将更新的DOM片段作为一个参数 - 像这样:
...
var ajaxedDom = $(xhr.resultText).find('#message');
ajaxedDom.appendTo('#modal');
$(document).trigger('domupdated', [ajaxedDom]);
对于我来说,这个设置需要所有的痛苦了INITING DOM的。它允许我维护一组初始化例程,并专注于有趣的事情。
在每次ajax调用后都会触发一个事件。它被称为ajaxComplete。
$(document).ajaxComplete(function() {
$(".log").text("Triggered ajaxComplete handler.");
});
结合本和fotanus的答案我创建了以下的模式:
$(document).ready(function() {
AjaxInit()
});
$(document).ajaxComplete(function() {
AjaxInit()
});
function AjaxInit() {
alert("test");
}
我用了一些诡计。 ;) 所有代码都在文件(ajax)的加载部分内。 我不使用任何'成功','完成'或扩展功能的jquery ajax负载。
首先我们必须建立任何功能。 例如:_autostart();
function _autostart() {
... all code here ....
}
在体内,我们将所有贴js代码什么我们在阿贾克斯负载结束时执行。
然后我们通过时间触发器来执行这个函数。 ;)
setTimeout("_autostart();",0000);
而就是这样。完成。 :)
当然我们可以在ajax之后的html代码中的任何事件上使用js代码函数。 例如:'onchange','onclick'等 这也是工作。 :)
POST如何停止'document.ready'?另外,给我们提供js文件的名字实际上并不让我们看到代码。 – tcooc 2011-04-10 07:23:25
那样? http://*.com/q/562229/93732 – 2011-04-10 07:28:59
很简单,当你做一个AJAX后,DOM不重新加载,因此document.ready不会再次触发。我的问题是,如果有办法做到这一点,我不知道。 js文件的内容与问题无关,发布时间太长。这些文件中的代码正在执行基于标准标记的操作,如$(“a”)。click(function(){return false;}); – 2011-04-10 07:29:09