jQuery function unresponsive after changing html

Posted by asdgfas sagas on Stack Overflow See other posts from Stack Overflow or by asdgfas sagas
Published on 2012-04-06T17:00:26Z Indexed on 2012/04/06 17:29 UTC
Read the original article Hit count: 153

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

THe problem is that when next is clicked, the 2nd tab opens. But after the html of #tab_change changed, the back button is responsive. The $(".back").click(function() { doesnt work.

HTML is posted for reference.

    <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>  

© Stack Overflow or respective owner

Related posts about jQuery