htmlを変更した後にjQuery関数が応答しない

Question

$(document).ready(function() { 

    $(".tab_content").hide(); //Hide all content 
    $(".tab_content:first").show(); //Show first tab content 

    $(".next").click(function() { 
    $(".tab_content").hide(); //Hide all tab content 
    $('#tab_change').html('<div class="back"></div>'); 
    $("#tab2").show(); 
    return false; 
    }); 

    $(".back").click(function() { 
    $(".tab_content").hide(); //Hide all tab content 
    $('#tab_change').html('<div class="next"></div>'); 
    $("#tab1").show(); 
    return false; 
    }); 

次は、2番目のタブが開きます。しかし、#tab_changeのHTMLが変更された後、戻るボタンが反応します。 $(".back").click(function() {は機能しません。

HTMLを参考にして掲載しています。

<div class="dialog_content" style="width:780px"> 

     <div id="tab_change" class="left border_right"> 
      <div class="next"></div> 
     </div> 

    <div id="tab1" class="tab_content"> 
    </div> 

    <div id="tab2" class="tab_content"> 

     <div class="right"><?php include("C:/easyphp/www/zabjournal/lib/flexpaper/php/split_document.php"); ?> 
     </div> 
    </div> 
</div> 

Answer 1

.on()機能でバインドする必要があります。 DOMがロードされているときに、背部のdivが終了しないので、clickイベントをバインドする必要があります。変更：

$(".back").click(function() { 
    $(".tab_content").hide(); //Hide all tab content 
    $('#tab_change').html('<div class="next"></div>'); 
    $("#tab1").show(); 
    return false; 
}); 

へ：

$('body').on('click','.back', function() { 
    $(".tab_content").hide(); //Hide all tab content 
    $('#tab_change').html('<div class="next"></div>'); 
    $("#tab1").show(); 
    return false; 
}); 

あなたはDOMがロードされたときに存在する要素にクリックイベントを結合している）（.click使用した場合。しかし、あなたの "back" divはまだ存在していないので、何もバインドすることはできません。 .on（）を使用することにより、jQueryはDOMを監視してその要素が作成されたかどうかを確認し、その要素がクリックされたときにclickイベントをその要素に関連付けます。

Answer 2

シンプルな表示と非表示のためにdom操作が多すぎると思います。以下のようなものを試してみて、

DEMO

$(document).ready(function() {  
    var $tab1 = $("#tab1"), $tab2 = $('#tab2');  

    $tab2.hide(); 
    $tab1.show(); //Show first tab 

    $('#tab_change div').click (function() { 
     var $this = $(this); 
     if ($this.hasClass('next')) { 
      $this 
      .removeClass('next') 
      .addClass('back'); 

      $tab1.hide(); 
      $tab2.show(); 
     } else { 
      $this 
      .removeClass('back') 
      .addClass('next'); 

      $tab2.hide(); 
      $tab1.show(); 
     } 
    }); 
});