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＆＃39;我创建了以下模式：

＆＃13;

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

＆＃13;

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

我使用了一些技巧。 ;）所有代码都在文件的加载部分（ajax）中。我没有使用任何成功＆＃39;完成＆＃39;等等。扩展了jquery ajax load的函数。

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

function _autostart() {

  ... all code here ....

}

在正文中，我们将粘贴所有js代码，以便在ajax加载结束时执行。

然后我们只是通过时间触发执行此功能。 ;）

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

这就是全部。完成。：）

当然我们可以在ajax之后的html代码中的任何事件上使用js代码函数。例如：＆＃39; onchange＆＃39;，＆＃39; onclick＆＃39;等。它的工作也是如此。：）

Answer 6

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

mpg <- mpg %>%
    distinct(model, year, .keep_all = TRUE)

ggplot(mpg, aes(x=year, y=hwy))+
    geom_point()+
    facet_wrap(~model) + theme(aspect.ratio=2)

在ajax post之后执行document.ready

6 个答案: