BootStrap Schalter hinzugefügt mit javaScript keine Ereignisse ausgelöst

Question

EDITED, gehen unter

ich einen Tisch und es hat für jede Zeile eine Zeile Click-Ereignis. Das Problem ist, dass ich einen Schalter in der letzten Spalte ("BootstrapSwitch") hinzugefügt habe und dieser Schalter weder Statusänderung noch Klickereignis nicht auslöst, da das Row-Click-Ereignis ihn überlappt. Ich weiß, dass das Ereignis funktioniert, weil es funktioniert, wenn ich den Schalter an einem anderen Ort platziere.

Gibt es trotzdem das Zeilenereignis in der ganzen Reihe außer einer Spalte?

// Switch event 
$('[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) { 
    console.log(this); // DOM element 
    console.log(event); // jQuery event 
    console.log(state); // true | false 
}); 

// row click 
$(document).on('click','.rowDev', function(e) { 
    e.preventDefault(); 
    // more code 
}); 

EDIT

Die Antwort zur Verfügung gestellt sollte mir helfen, aber ich ein anderes Problem bemerkt. Feuer-Ereignis-Problem. Anhängenden Schalter an den Tisch mit JScript und die Initialisierung vielleicht nicht funktionieren, weil jeder der Schalter dynamisch hinzugefügt arbeiten, nur die, die ich manuell hinzufügen auf .html

ist dies die Zeile I der Tabelle hinzufügen

"<td><input class='make-switch' type='checkbox' name='my-checkbox' "+ (!anyUnattendedAlert?"checked ":"")+"data-on-color='success' data-off-color='danger' data-on-text='Si' data-off-text='No'>" + 
            "</td>"+ 

und wenn alle Zeilen

$("[name='my-checkbox']").bootstrapSwitch(); 

hinzugefügt werden tryed auch jede Zeile ich hinzufügen zu initialisieren. Ich habe in anderen Tabellen versucht, die ich ohne Reihenereignis hatte und immer noch nicht das Schalterereignis abfeuert (das Ereignis, das in den Anmerkungen unten zur Verfügung gestellt wird).

Noch weiß nicht, wie Sie diese Schalter hinzufügen und initialisieren sie zu arbeiten.

P.D: CSS und JS funktioniert, da manuell hinzugefügte Schalter Ereignisse auslösen.

Dank

Answer 1

Sie können dieses Problem lösen, indem stopPropagation() auf dem click Ereignis aufrufen, die auf dem Bootstrap-Schalter Steuer abfeuert. Dadurch wird das Ereignis beenden das DOM sprudeln und Brennen auf der übergeordneten .rowDev:

$('[name="my-checkbox"]').on('click', function(e) { 
    e.stopPropagation(); 
}); 

Beachten Sie, dass auch die beiden Event-Handler zusammen in einem on() Anruf teilnehmen können, wenn Sie es vorziehen:

$('[name="my-checkbox"]').on({ 
    'switchChange.bootstrapSwitch': function(e, state) { 
    console.log(this); // DOM element 
    console.log(e); // jQuery event 
    console.log(state); // true | false 
    }, 
    'click': function(e) { 
    e.stopPropagation(); 
    } 
});