Seite aktualisieren - JavaScript

Question

Ich habe eine Rails-Anwendung mit JavaScript und es funktioniert, wenn das Dokument geladen wird. Allerdings muss ich das JavaScript neu laden, wenn ich auf eine neue Seite gehe. Gibt es das überhaupt, ohne die Seite neu zu laden, oder muss ich die Seite neu laden?

ich zur Zeit habe die jQuery-Code wie diese zB von Ereignissen mit dynamisch generierten HTML delegiert,

var main = function() { 

var toggleProductImage = function() { 
    $(this).children().each(function() { 
     this.classList.toggle('hide'); 
    }) 
} 

$('.ind a').each(function() { 
    $(this).mouseenter(toggleProductImage); 
    $(this).mouseleave(toggleProductImage); 
}); 
}; 

Answer 1

Gebrauch geschrieben habe. eine Ajax-Anfrage. Finden Sie den nächsten Eltern, die statisch sind, verwende ich document wie ich weiß nicht, Ihre DOM-Baum:

$(document).on('mouseenter', '.ind a', toggleProductImage) 
      .on('mouseleave', '.ind a', toggleProductImage); 

function toggleProductImage() { 
    $(this).children().toggleClass('hide'); 
} 

Damit werden die Ereignisse auf document binden und nur die Handler ausgelöst, wenn ein Element .ind a das Ziel übereinstimmt.

Sehen Sie mehr über .on(events [, selector ] [, data ], handler)

events Typen: PlainObject
Ein Objekt, in dem der String-Schlüssel eines repräsentieren oder mehr durch Leerzeichen getrennten Ereignistypen und optionale Namespaces und die Werte repräsentieren eine Handler-Funktion aufgerufen werden, für die Veranstaltung (en).

selector Typ: Zeichenfolge
Eine Selektorzeichenfolge zum Filtern der Nachkommen der ausgewählten Elemente, die den Handler aufrufen. Wenn der Selektor null oder ausgelassen ist, wird der Handler immer aufgerufen, wenn er das ausgewählte Element erreicht.

Ich änderte Ihre toggleProductImage auch

Answer 2

Ich glaube nicht, dass Nachladen JavaScript ist, was Sie wollen, dass es mehr jQuery artig zu machen. Sie könnten eine js-Datei erhalten und sie erneut analysieren, aber die Objekte aus dem vorherigen Laden der Datei werden immer noch da sein. Sie müssten alles, was Sie erstellen, verfolgen und alle Event-Handler entfernen und dann die js neu laden.

Stattdessen denke ich, Sie sollten die Mouseenter/Mouselave an das Elternelement anhängen und den Handler filtern.

$('.ind').on('mouseenter', 'a', function(e) toggleProductImage); 
$('.ind').on('mouseleave', 'a', function(e) toggleProductImage);