Wie kann ich meine jQuery-Funktion mit versteckten Elementen arbeiten, wenn sie sichtbar gemacht werden

Question

Ich habe diese Funktion, die anfänglich funktioniert, aber wenn ich die Seite ändern, um ausgeblendete Elemente anzuzeigen, funktioniert die Funktion nicht mit den Elementen, die einmal ausgeblendet wurden.

jQuery(document).ready(function($) { 

$(".paragraph-div").hide(); 

$(".toggle-div").click(function() 
        { 
if ($(this).next(".paragraph-div").is(":visible")) { 
    $(this).next(".paragraph-div").hide(); 
    $(this).text("More Info"); 
} else { 
    $(this).next(".paragraph-div").show(); 
    $(this).text("Less Info"); 
} 
}); 

}); 

ich jsfiddle hier gemacht habe: https://jsfiddle.net/6k0bshb6/44/

So was passiert ist, es funktioniert nur auf .paragraph-div ‚s, die zunächst sichtbar auf Seite Last sind so, wenn ich neuen Absatz divs zeigen (durch die Tabelle Filterung oder Mit der Schaltfläche Zeige mehr Zeilen auf meinem Tisch) sind sie bereits geöffnet, wenn sie ausgeblendet werden sollen und die Klick-Funktion nicht funktioniert.

Ich bin ziemlich neu zu jQuery und weiß nicht die richtige Methode, um dies zu tun, aber ich denke, es hat etwas mit ("document").ready zu tun Ich denke, ich muss das ändern, aber was soll ich es ändern?

Wenn Sie möchten, um das Problem zu sehen, werden Sie bei http://mobilereactor.co.uk/shop/mobile-phones/apple-iphone-5s-32gb-space-grey-deals/

Answer 1

arbeitet an einer mobilen Version von meiner Seite User Agent Switcher und eine beliebte mobile User-Agent-String als im brauchen fand ich eine Antwort auf diese Frage jQuery - How do I bind events to hidden elements that will be shown later?

Ich verstehe es nicht ganz - aber es funktioniert!

Meine Lösung;