隠し要素が表示されたときにjQuery関数が機能するようにするには

Question

この関数は最初は機能しますが、隠し要素を表示するようにページを変更すると、一度非表示だった要素は機能しません。起こっていただきました！私は新しい段落のdivを表示したときにのみ、そのページのロード時に最初に表示されている.paragraph-div年代上で動作されるようにテーブルをフィルタリングすることにより（https://jsfiddle.net/6k0bshb6/44/

か：私はここにjsfiddleをした

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"); 
} 
}); 

}); 

私のテーブルでもっと多くの行を表示ボタンを使用して）彼らはすでに隠されている必要があり、クリック機能がそれらで動作しないときに開いています。

私はかなりjQueryを新しくしていますが、これを行う正しい方法はわかりませんが、それは("document").readyと関係があると思います。私はそれを変更する必要があると思います。

あなたはイムhttp://mobilereactor.co.uk/shop/mobile-phones/apple-iphone-5s-32gb-space-grey-deals/

Answer 1

で私のサイトのモバイル版に取り組んとして使用すると、ユーザエージェントスイッチャーや人気のモバイルユーザーエージェント文字列が必要になり、問題を確認したい場合、私はこの質問への答えを見つけたjQuery - How do I bind events to hidden elements that will be shown later?

私はそれを完全に理解していませんが、機能します！

私の解決策。

//toggle details open and close 
$('body').on('click','.toggle-div',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"); 
} 
});