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()函数绑定。由于后端div在加载DOM时不会退出，因此您需要将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;
});

当您使用.click（）时，您将click事件绑定到加载DOM时存在的元素。但是，您的“后退”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();
        }
  });
 });

更改html后jQuery函数无响应

2 个答案: