ajax后执行document.ready后

Question

我有一个custom.js文件，其中有几个元素有点击和其他方法绑定到他们。整个文件封装在document.ready（）中，一切正常。但是，当我做了一个AJAX的帖子显然document.ready（）永远不会再次为当前页面启动。无论如何，我可以让document.ready（）再次触发，还是需要让命名函数中的所有内容都调用它们，形成我的create.js.erb？

Answer 1

您可以随时将所有内容放在一个函数中（名为loadfunction或其他东西），并在文档加载时调用该函数，并在加载ajax时再次调用该函数。虽然它是一个黑客入侵的解决方案，但它应该工作得很好。

所以后来采取一切$(document).onready(function() {和尾架} 之间并把它与function OnloadFunction() {结束}。 然后把$document.onready(OnloadFunction);

例： 你有

$(document).ready(function() {alert("test");}); 

它会变成：

function OnloadFunction() 
{ 
    alert("test"); 
} 
$(document).ready(OnloadFunction); 

然后就可以调用OnloadFunction只要你想。

Answer 2

我已经成功地使用类似以下的模式：

首先，我们必须定义一个.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的。它允许我维护一组初始化例程，并专注于有趣的事情。

Answer 3

在每次ajax调用后都会触发一个事件。它被称为ajaxComplete。

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
}); 

Answer 4

结合本和fotanus的答案我创建了以下的模式：

$(document).ready(function() { 
 
    AjaxInit() 
 
}); 
 

 
$(document).ajaxComplete(function() { 
 
    AjaxInit() 
 
}); 
 

 
function AjaxInit() { 
 
    alert("test"); 
 
}

Answer 5

我用了一些诡计。 ;） 所有代码都在文件（ajax）的加载部分内。 我不使用任何'成功'，'完成'或扩展功能的jquery ajax负载。

首先我们必须建立任何功能。 例如：_autostart（）;

function _autostart() { 

    ... all code here .... 

} 

在体内，我们将所有贴js代码什么我们在阿贾克斯负载结束时执行。

然后我们通过时间触发器来执行这个函数。 ;）

setTimeout("_autostart();",0000); 

而就是这样。完成。 :)

当然我们可以在ajax之后的html代码中的任何事件上使用js代码函数。 例如：'onchange'，'onclick'等 这也是工作。 :)