27

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

4

6 回答 6

38

您总是可以将所有内容放在一个函数中（名为 loadfunction 或其他），并在加载文档时调用该函数，并在加载 ajax 时再次调用。虽然它是一个组合在一起的解决方案，但它应该足够好用。

所以然后把所有的东西都放在它的$(document).onready(function () { 结尾括号之间，} 然后把它放在function OnloadFunction () {结尾处}。然后放$document.onready(OnloadFunction);

例子：你有

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

它会变成：

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

然后，您可以随时拨打电话OnloadFunction。

于 2011-04-10T07:50:50.463 回答
21

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

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

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

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

于 2015-02-03T00:06:44.627 回答
18

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

$( document ).ajaxComplete(function() {
    $( ".log" ).text( "Triggered ajaxComplete handler." );
});
于 2014-07-04T16:48:50.753 回答
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);
  };

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

于 2011-04-10T19:01:21.853 回答
1

肯麦克的回答略有不同。无论出于何种原因，除非它嵌套在 document.ready 中，否则我的 ajaxComplete 不会触发。将它嵌套在里面并仍然呼唤对我有用。

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

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

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

于 2019-06-26T20:38:03.093 回答
0

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

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

function _autostart() {

  ... all code here ....

}

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

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

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

就这样。完毕。:)

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

于 2017-08-09T20:42:14.257 回答