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

問題は、[次へ] をクリックすると 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>
4

2 に答える 2

2

.on()関数でバインドする必要があります。DOM がロードされたときに back div が終了しないため、クリック イベントをそれにバインドする必要があります。変化する：

$(".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() を使用すると、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 に答える