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

다음 문제가 발생하면 두 번째 탭이 열립니다. 그러나 #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 사용하십시오. 그러나 "뒤로"div는 아직 존재하지 않으므로 아무 것도 바인딩 할 수 없습니다. .on()을 사용하여 jQuery는 DOM을보고 해당 요소가 생성되는지 여부를 확인한 후 DOM 요소에 click 이벤트를 첨부합니다.

Answer 2

간단한 쇼와 숨기기에 너무 많은 돔 작업이 있다고 생각합니다. 아래처럼 뭔가를 시도

$(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(); 
     } 
    }); 
});