web-dev-qa-db-ja.com

Ajaxポストの後にdocument.readyを実行します

クリックやその他のメソッドがバインドされているいくつかの要素があるcustom.jsファイルがあります。ファイル全体がdocument.ready（）にカプセル化され、すべてが機能します。ただし、AJAX postを実行すると、明らかに現在のページでdocument.ready（）が再度起動されることはありません。名前付き関数のすべてが私のcreate.js.erbから呼び出されますか？

jqueryajaxruby-on-rails-3postdocument-ready
26
Jason Yost

常にすべてを1つの関数（loadfunctionまたは何かという名前）に入れて、ドキュメントが読み込まれたとき、およびajaxが読み込まれたときにその関数を呼び出すことができます。ハッキングされたソリューションですが、十分に機能するはずです。

したがって、$(document).onready(function () {とその終了ブラケット}の間のすべてを取得し、}で終わるfunction OnloadFunction () {に配置します。次に$document.onready(OnloadFunction);を入れます

例：あなたは

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

次のようになります。

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

その後、いつでもOnloadFunctionを呼び出すことができます。

35
Ben

Benとfotanusの回答を組み合わせて、次のパターンを作成しました。

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

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

function AjaxInit() {
    alert("test");
}
19
Ken Mc

すべてのajax呼び出しの後にトリガーされるイベントがあります。 ajaxComplete と呼ばれます。

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

次のようなパターンを正常に使用しました。

まず、.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関数を記述して、それを「準備完了」イベントにバインドし、カスタムの「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の初期化からすべての苦痛を取り除きます。これにより、1組のinitルーチンを維持し、楽しいことに集中できます。

2
Már Örlygsson

私はいくつかのトリックを使用しました。 ;）すべてのコードは、ファイルのロードされた部分（ajax）内にあります。 「成功」、「完了」などは使用しません。jqueryajaxロードの拡張機能。

まず、関数を作成する必要があります。例：_autostart（）;

function _autostart() {

  ... all code here ....

}

本文には、ajaxロードの最後に実行する必要があるすべてのjsコードを貼り付けます。

次に、タイムトリガーによってこの関数を実行します。 ;）

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

そしてそれだけです。できた:)

もちろん、ajaxの後のhtmlコード内の任意のイベントでjsコード関数を使用できます。たとえば、「onchange」、「onclick」などです。これも機能します。 :)

0
Brudka

ケン・マックの答えのちょっとした工夫。何らかの理由で、ajaxCompleteがdocument.ready内にネストされていない限り起動しません。中に入れ子にし、それでも声をかけてもうまくいきました。

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

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

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