在Ajax提交后执行document.ready

Question

我有一个custom.js文件，在其中有几个元素绑定了点击和其他方法。整个文件都封装在document.ready()中，一切都可以工作。然而，当我进行AJAX post时，显然当前页面不会再次触发document.ready()。有没有办法让document.ready()再次触发，还是我需要将所有内容放在命名函数中，然后从我的create.js.erb中调用它们？

- Jason Yost

---

一个POST请求如何停止document.ready？另外，仅提供JS文件的名称并不能让我们看到代码。 - tcooc

你是这样想的吗？https://dev59.com/E3RB5IYBdhLWcg3wpYqo - Ahmet Kakıcı

非常简单，当您进行AJAX POST时，DOM不会重新加载，因此document.ready不会再次触发。我的问题是特定地是否有我不知道的方法来实现这一点。 js文件的内容与问题无关且过长无法发布。文件中的代码正在执行标准的基于标记的操作，例如 $（“a”）.click（function（）{return false;}）; - Jason Yost

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。

- Jess

---

将代码放在文字上，类似于 $(document).ready(function DocReady() { ... });。 - Shadow The Spring Wizard

你的代码有问题是有原因的。通过执行$(document).onready(OnloadFunction());，你将OnLoadFunction的返回值（即undefined）推送到onready方法中。 - Micaël Félix

Answer 2

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

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

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

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

- Ken Mc

Answer 3

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

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

- fotanus

Answer 4

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

首先，我们必须定义一个 .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);
  };

接下来，我们编写init函数并将其绑定到“ready”事件和我们自定义的“domupdated”事件。在init函数中，我们使用.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]);

对我来说，这种设置可以完全消除DOM初始化的痛苦。它使我能够维护一个单一的初始化程序集，并专注于有趣的事情。

- Már Örlygsson

Answer 5

在Ken Mc的答案上稍作修改。由于某种原因，我的ajaxComplete不会触发，除非它被嵌套在document.ready中。将其嵌套在其中并仍然调用对我有用。

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

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

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

- byork2005

Answer 6

我尝试了Jess、Ken Mc和byork2005的答案，但都没有起作用。唯一对我有用的方法是使用jQuery的.trigger函数。为此，必须使用.on调用“ready”处理程序。这样可以稍后手动触发事件。请参阅.trigger文档。

$(document).on('ready myFunction',function(){
    (blah blah)
    Rails.ajax({
        (blah blah)
        success: function(result) {
          $(document).trigger('myFunction');
        }
    });
});

$(document).trigger('myFunction');

现在myFunction会在文档准备就绪时和成功的ajax调用时触发。另一种触发函数的方法是使用

$(document).trigger('myFunction');

可以在页面的任何位置，甚至在控制台中使用。请注意这一点，并考虑安全性。

- Jussi Hirvi

Answer 7

我用了一些技巧。 ;) 所有的代码都在文件的加载部分中（ajax）。 我没有使用任何'成功'，'完成'或其他扩展函数。

首先，我们必须构建任何函数。 例如：_autostart();

function _autostart() {

  ... all code here ....

}

在页面主体中，我们将粘贴所有需要在 ajax 加载结束时执行的 js 代码。

然后，我们只需按照时间触发器执行此函数。 ;)

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

就是这样了。完成了。:)

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

- Brudka