2

Rails 3.1を実行していて、ファイル/app/assets/javascripts/procedures.jsに次のjqueryスクリプトがあります。

$(document).ready(function(){
  $('.unselected').click(function() {
    $(this).removeClass('unselected');
    $(this).addClass('selected');
  });

  $('.selected').click(function() {
    $(this).removeClass('selected');
    $(this).addClass('unselected');
  });
});

最初のアクションは期待どおりに機能します（選択）が、選択解除は機能しません。

一方、このスクリプトは期待どおりに機能します。

$(document).ready(function(){
  $('.tile').click(function () {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      $(this).addClass('unselected');
    } else if ($(this).hasClass('unselected')) {
      $(this).removeClass('unselected');
      $(this).addClass('selected');
    }   
  }); 
});

イベントリスナーは、スクリプトが最初に実行されたときにのみ割り当てられるためですか？

4

3 に答える 3

2

Jqueryはイベントを要素にバインドするためdocument.load()、クラスをunselectedthenに変更しても、イベントをその要素にバインドしたことを意味するわけではありません。

これを試して

$(document).ready(function(){
  $('body').on('click','.unselected',function() {
    $(this).removeClass('unselected');
    $(this).addClass('selected');
  });

  $('body').on('click','.selected',function() {
    $(this).removeClass('selected');
    $(this).addClass('unselected');
  });
});
于 2012-07-03T06:52:59.207 に答える
2

.unselectedそのクリックハンドラーにバインドした後にクラスを要素に追加しても、そのクラスの新しい要素には影響しません。現在および将来の.on()すべての要素にバインドするには、jQueryを使用する必要があります。http://api.jquery.com/on/.unselected

と.click()の両方について、sを次のように変更します。.selected.unselected

$(document).on("click",".unselected",function(){
    // toggle your classes here
});
于 2012-07-03T06:53:02.800 に答える
0

Document.Readyは、ドキュメントが読み込まれるとすぐに実行されます。

よくわかりませんが、この特定の問題は、そうです、document.readyの関数はDOMがロードされるとすぐに定義されることを示しています。これで、DOMがロードされると、divが「選択されていない」だけが検出されます。したがって、それぞれの関数をこのクラスにバインドします。一方、「選択された」divを見つけることができないため、バインド関数をこのクラスにバインドすることはできません。

専門家には、この答えが正しければ正当化してくださいとお願いします。そうでなければ、何が正しいか教えてください！

于 2012-07-03T06:53:20.397 に答える