2

次のようなJqueryスクリプトを含む単純なファイルがあります。

<script type="text\javascript">     
$('.grey_title').click(function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
    });
    $('#hideall').click(function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
    });
    $('#showall').click(function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
   });
</script>
  <div><span id="hideall">Hide all Menus</span></div>

この関数は、メニューを非表示にしている間、および HTML で ID を showall に変更し、スクリプトを slideToggle に変更すると正常に動作しますが、[すべて非表示] をクリックするとすべてが閉じられ、Firefox によれば、アイテムが次のように変更されます。

<span id="showall">...</span>

しかし、もう一度クリックしても何も起こりません。私は何が間違っているのでしょうか？

ページ

4

4 に答える 4

3

バインディングが完了したときに showall がないため、バインディングが失敗することが予想されます

より良い選択はトグルです

ページがロードされたときに表示されるものと一致するように機能を切り替えることができます

デモはこちら

$('#hideall').toggle(
  function(){
    $('.inner_div').slideUp('slow');
    $(this).text("Show all Menus");
  },
  function(){
    $('.inner_div').slideDown('slow');
    $(this).text("Hide all Menus");
  }
);
于 2011-06-21T16:37:10.530 に答える
2

ID がなくなると、ID にバインドされているイベントが切り離されます。liveイベントバインディングを試すことができます。

$('#hideall').live('click', function(){
    $('.inner_div').slideUp('slow');
    $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
});
$('#showall').live('click', function(){
    $('.inner_div').slideDown('slow');
    $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
});
于 2011-06-21T16:37:50.213 に答える
0

イベントを定義するには、delegate または live を使用する必要があります。上記のイベントが行うことは、ハンドラーをページ上の既存の要素にバインドするだけであり、ライブ/デリゲート関数は既存および将来の要素にバインドします。

$(document).delegate('.grey_title', "click",function(){
        $(this).parent().find('.inner_div').slideToggle('slow');
 }).delegate('#hideall'."click", function(){
        $('.inner_div').slideUp('slow');
        $(this).parent().html("<span id=\"showall\">Show all Menus</span>");
}).delegate('#showall',"click", function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
});

</script>
  <div><span id="hideall">Hide all Menus</span></div>
于 2011-06-21T16:37:39.247 に答える
0

まだ存在しない要素へのクリックイベントにバインドしています...これを試してください：

$('#showall').live('click', function(){
        $('.inner_div').slideDown('slow');
        $(this).parent().html("<span id=\"hideall\">Hide all Menus</span>");
    });
于 2011-06-21T16:38:05.960 に答える