27

クリックと他のメソッドがバインドされたいくつかの要素を含む custom.js ファイルがあります。ファイル全体が document.ready() にカプセル化され、すべてが機能します。ただし、AJAX の投稿を行うと、現在のページに対して document.ready() が再び起動されることはありません。とにかく document.ready() を再び起動させることができますか、それとも名前付き関数のすべてを create.js.erb から呼び出す必要がありますか?

4

6 に答える 6

38

いつでもすべてを 1 つの関数 (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を開始することからすべての苦痛を取り除きます。これにより、単一のinitルーチンのセットを維持し、楽しいことに集中することができます。

于 2011-04-10T19:01:21.853 に答える