Führen Sie document.ready nach dem Ajax-Post aus

Ich habe eine custom.js-Datei, in der ich mehrere Elemente habe, an die Click und andere Methoden gebunden sind. Die gesamte Datei ist in document.ready() gekapselt und alles funktioniert. Wenn ich jedoch einen AJAX-Post mache, wird document.ready() für die aktuelle Seite nie wieder ausgelöst. Kann ich document.ready() irgendwie erneut auslösen oder muss ich alles in benannten Funktionen haben, die sie von meiner create.js.erb aufrufen?

Sie könnten immer alles in eine Funktion (mit dem Namen loadfunction oder so) packen und diese Funktion aufrufen, wenn das Dokument geladen wird, und erneut, wenn das Ajax geladen wird. Obwohl es sich um eine gehackte Lösung handelt, sollte sie gut genug funktionieren.

Also dann nimm alles dazwischen $(document).onready(function () { und seine Endhalterung }
Und steck es ein function OnloadFunction () { endet mit }. Dann setzen $document.onready(OnloadFunction);

Beispiel: Sie haben

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

Daraus würde werden:

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

Dann kannst du anrufen OnloadFunction wann immer du willst.

Durch die Kombination der Antworten von Ben und Fotanus habe ich das folgende Muster erstellt:

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

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

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

Es gibt ein Ereignis, das nach jedem Ajax-Aufruf ausgelöst wird. Es wird genannt ajaxComplete.

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

Ich habe erfolgreich ein Muster wie das folgende verwendet:

Zunächst müssen wir ein .query()-Plugin definieren.

// 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);
  };

Dann schreiben wir unsere Init-Funktion und binden sie an das „ready“-Ereignis und auch an unser benutzerdefiniertes „domupdated“-Ereignis. Innerhalb der von uns verwendeten Init-Funktion .query() um Elemente entweder aus dem gesamten Dokument oder nur aus dem aktualisierten Fragment zu finden …

// 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...

  });

Immer dann, wenn wir Blöcke neuer Elemente in das DOM einfügen (z. B. wenn eine Ajax-Anfrage beendet ist), lösen wir die aus domupdated event und übergeben Sie das aktualisierte DOM-Fragment als Parameter – etwa so:

...
var ajaxedDom = $(xhr.resultText).find('#message');
ajaxedDom.appendTo( '#modal' );

$(document).trigger('domupdated', [ajaxedDom]);

Für mich nimmt diese Einrichtung den ganzen Schmerz aus der Initiierung des DOM. Es erlaubt mir, einen einzigen Satz von Init-Routinen beizubehalten und mich auf die lustigen Dinge zu konzentrieren.

Kleine Wendung bei Ken Mc’s Antwort. Aus irgendeinem Grund würde mein AjaxComplete nicht ausgelöst werden, es sei denn, es wäre in einem document.ready verschachtelt. Es innen zu verschachteln und immer noch zu rufen, hat für mich funktioniert.

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

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

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

Ich habe einen Trick angewendet. 😉 Der gesamte Code befindet sich im geladenen Teil der Datei (ajax). Ich verwende keine “Erfolg”, “Fertig” oder etc. erweiterte Funktion von Jquery Ajax Load.

Zuerst müssen wir irgendeine Funktion bauen. Zum Beispiel: _autostart();

function _autostart() {

  ... all code here ....

}

In den Körper fügen wir den gesamten JS-Code ein, den wir am Ende des Ajax-Ladens ausführen müssen.

Dann führen wir diese Funktion einfach durch den Zeittrigger aus. 😉

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

Und das ist alles. Fertig. 🙂

Natürlich können wir die js-Code-Funktion für jedes Ereignis im HTML-Code nach Ajax verwenden. Zum Beispiel: ‘onchange’, ‘onclick’ usw. Es ist auch Arbeit. 🙂

Ich habe die Antworten von Jess, Ken Mc und byork2005 ausprobiert, und nichts hat funktioniert. Die einzige Methode, die für mich funktioniert hat, war die Verwendung von jquery .trigger Funktion. Dazu muss der ‘ready’-Handler mit aufgerufen werden .on. Dadurch ist es möglich, das Ereignis später manuell auszulösen. Siehe die docs für .trigger.

$(document).on('ready myFunction',function(){
    (blah blah)
    Rails.ajax({
        (blah blah)
        success: function(result) {
          $(document).trigger('myFunction');
        }
    });
});

$(document).trigger('myFunction');

Jetzt myFunctionwird sowohl bei fertigem Dokument als auch bei erfolgreichen Ajax-Aufrufen ausgelöst. Eine andere Möglichkeit, die Funktion auszulösen, ist die Verwendung

$(document).trigger('myFunction');

irgendwo auf der Seite oder sogar in der Konsole. Seien Sie sich dessen bewusst und denken Sie an die Sicherheit.