Initialize On-Off Toggle Elemente

Question

Ich habe eine Tabelle von Konten und ich möchte sie mit JQuery Toggles ein-/ausschalten können. Am Anfang muss ich die Toggles jedes Accounts initialisieren (entweder ein Account ist aktiviert oder deaktiviert). Ich möchte dies beim Laden der Seite tun.

Mein Jade Schablonenteil:

tbody 
    each account in accounts 
    tr 
     td 
     .col-sm-7.control-label 
      div(class='toggle toggle-success', onload='initToggle(#{account.IsActive}, this)') 
     | #{account.Id} 
     td #{account.Email} 

Funktion My init Toggle:

script. 
    jQuery(document).ready(function() { 
    function initToggle(isActive, element) 
    { 
     if (isActive) 
     element.toggles({'on': true}); 
     else 
     element.toggles({'on': false}); 
    } 

Mein Problem:

Wenn ich onload= für meine Funktionsaufruf Ich benutze Erhalte keinen Fehler bei alle. Wenn ich die onclick= als Funktionsaufruf verwenden, Google Chrome zeigt:

Uncaught ReferenceError: initToggle is not defined

Wie würde ich initialisieren richtig meine on/off schaltet?

Answer 1

Sie erhalten den Fehler, weil die Funktion innerhalb des "Bereit" -Rückrufs deklariert ist. Um dies zu beheben, würde ich die Logik bewegen und lassen Sie die Javascript entscheidet wenn init Dinge:

Jade Teil

div(class='toggle toggle-success', data-is-active='#{account.IsActive}') 

Javascript Teil

jQuery(document).ready(function ($) { 
    $(".toggle").each(function() { 
    var $this = $(this); 
    var isActive = $this.data("isActive") === "true"; 
    // or .data("is-active") for jQuery 2, see https://api.jquery.com/data/ 
    $this.toggles({'on': isActive}); 
    }); 
}); 

Die Jade Seite verwendet eine html data attribute zum Speichern der Informationen und die js Seite verwendet es, wenn das Dokument bereit ist.