0 
$(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>
4

2 回答 2

2

您需要绑定.on()函数。由于加载DOM时back 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;
});

当您使用 .click() 时，您将 click 事件绑定到加载 DOM 时存在的元素。但是，您的“后退” div 尚不存在，因此您无法将任何内容绑定到它。通过使用 .on()，jQuery 监视 DOM 以查看该元素是否被创建，并且当它创建时，将单击事件附加到它。

于 2012-04-06T17:02:53.057 回答
1

我认为您对简单的显示和隐藏有太多的 dom 操作。试试下面的东西，

演示

$(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();
        }
  });
 });
于 2012-04-06T17:10:33.533 回答