ajax post后执行document.ready

Question

我有一个 custom.js 文件，其中有几个元素绑定了 click 和其他方法。整个文件被封装在 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

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

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

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

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

Answer 3

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

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

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 的所有痛苦。它允许我维护一组初始化例程，并专注于有趣的事情。

Answer 5

肯·麦克的回答略有不同。无论出于何种原因，我的 ajaxComplete 都不会触发，除非它嵌套在 document.ready 中。把它放在里面并仍然大声叫对我来说很有效。

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

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

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

Answer 6

我用过一些技巧。 ;)
所有代码都位于文件（ajax）的加载部分内。
我不使用任何“成功”、“完成”等 jquery ajax 加载的扩展功能。

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

function _autostart() {

  ... all code here ....

}

在正文上，我们将粘贴在 ajax 加载结束时必须执行的所有 js 代码。

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

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

仅此而已。完毕。 :)

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

Answer 7

我尝试了 Jess、Ken Mc 和 byork2005 的答案，但没有任何效果。对我有用的唯一方法是使用 jquery 的 .trigger 函数。为此，必须使用 .on 调用“就绪”处理程序。这使得以后可以手动触发事件。请参阅.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');

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