2016-06-30 5 views
0

Situation

ich Bootstrap verwende eine Tabelle auf Werte in einem Array von Objekten basierend zu machen. Ich habe eine Auswahl, bei der eine Methode jQuery on ('change') angehängt ist, so dass beim Auswählen eines Elements aus der Liste eine neue Tabelle basierend auf dem ausgewählten Wert gerendert wird.jQuery auf ‚Klick‘ Triggern nicht nach dem Wechsel auf eine Bootstrap-Tabelle

Die Tabelle verwendet Bootstrap-Kollaps, um Zeilen aus der Tabelle ein-/auszublenden, wenn auf die oberste Zeile geklickt wird. das letzte Element in der Reihe hat einen glyphicon Pfeil, der die Reihe können gefaltet werden/entfaltet wie das Bild unten

collapse with glyphicon

ich die folgenden jQuery zeigt bin mit dem Symbol

$('#tog').on('click', function() { 
    console.log("tog clicked"); 
    $(this).find('span').toggleClass('glyphicon-arrow-up glyphicon-arrow-down'); 
}); 

hin- und herzuschalten bisher habe ich das alles funktioniert, wie mit dieser Geige gezeigt http://jsfiddle.net/vgfb74u0/

Problem

die Frage, die ich bin faci Wenn eine neue Tabelle basierend auf dem ausgewählten Element gerendert wird, wird die jQuery, die die Glyphe ändert, nicht ausgelöst. Wenn die Tabelle sich entfaltet, bleibt das Symbol gleich.

Ich habe eine console.log am Anfang der Methode und ich sehe es nie feuern. Für meine neuen Augen wird das Klick-Ereignis nie ausgelöst.

Ich bin überrascht, dass ich es geschafft habe, so weit und mit Verlust zu bekommen, was das Problem sein könnte, also jede Hilfe, Hinweise oder Beratung ist sehr willkommen!

Antwort

4

Sie müssen Ereignisse manuell an jedes dynamisch erstellte Element binden, oder lassen Sie jQuery das für Sie tun.

Ändern

$('#tog').on('click', function() {}); 

Um

$('html').on('click', '#tog', function() {}); 

Wird JavaScript sagen das Ereignis zu jedem #tog zu delegieren, die innerhalb des <html> Element erstellt wird.

+0

es Ihnen danken! funktioniert perfekt! – JinJinUK

+0

Vielen Dank. Ich hatte Mühe, nicht zu verstehen, warum es nicht ausgelöst wurde. Das hat perfekt funktioniert. – rails4sandeep

0

Das Problem ist der Ereignishandler ist verloren, wenn die Tabelle neu gerendert wird. Das Update ist die Prozedur in einer anderen Weise zu befestigen: $('.table').on('click', '#tog', function() {...}

See the updated jsfiddle

+0

brilliant! Danke, das hat Spaß gemacht! – JinJinUK