jQueryが2番目のページのli項目のクリックを認識しない

Question

私は、クリックするとウェブサイトのテーマを変更するためにいくつかのボタンを作っています。彼らはメインページで作業しますが、2ページ目に移動しようとするともう働きません。クリックは全く認識されていません。ここで

$(document).ready(function(){ 
    $(document).on("click", "#warm", function() { 
    console.log("Clicked!"); 
    $(b).addClass('color-red'); 
    $(li).addClass('color-red #pages li'); 
    $(h1).addClass('color-red h1'); 
    $('#pages').addClass('color-red #pages'); 
    });} 

ではなくaddClassのremoveClassを使用する以外、それ

<div class="col-md-4 text-center"> 
    <ul id="colors"> 
    <li id="warm"> 
     Warm 
    </li> 
    <li id="cool"> 
     Cool 
    </li> 
    </ul> 
</div> 

に行くhtmlがクールな機能は、暖かいとまったく同じです。

Answer 1

$(document).ready(function(){ 
    $(document).on("click", "#warm", function() { 
    console.log("Clicked!"); 
    $(b).addClass('color-red'); 
    $(li).addClass('color-red #pages li'); 
    $(h1).addClass('color-red h1'); 
    $('#pages').addClass('color-red #pages'); 
    });} 

WOAHHHバックアップパートナー。最初に、今後のイベントを作成している場合を除いて、ドキュメントにバインドする必要はありません。 idセレクタを使用しているので、そのページの1つだけを持っている必要があります。ページにその特定のIDを再バインドすると再バインドできます。それは非常に重いか何かであるので、あなたはその文書に目が見えません。 jqueryは、その要素に別のイベントバインディングを作成する必要があるかどうかを確認するために、別の "#warm"を追加したかどうかを確認するHTML変更があるたびに、DOM全体を解析する必要があります。だから、最初にあなたのコードをオフ

は今、この

$(document).ready(function(){ 
    $("#warm").on("click", function(e) { 
    console.log("Clicked!"); 
    $(b).addClass('color-red'); 
    $(li).addClass('color-red #pages li'); 
    $(h1).addClass('color-red h1'); 
    $('#pages').addClass('color-red #pages'); 
    });} 

ようないくつかの明確化のための時間になるはずです、あなたは、「2ページ目に移動」何を意味するのですか？そこにはあなたがそれらを動かすと言うどのようなコードがありますか？ 2番目のページは何ですか？