Question

我正在运行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');
    }   
  }); 
});

是否因为事件侦听器仅在首次运行脚本时分配？

Answer 1

因为Jquery将事件绑定到document.load()上的元素，并且当您将类更改为unselected时，并不意味着您已使用该元素绑定事件。

试试这个

$(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');
  });
});

Answer 2

在绑定到该单击处理程序后将类.unselected添加到元素不会影响该类的新元素。你必须使用jQuery .on()绑定到所有.unselected元素，当前和未来。 http://api.jquery.com/on/

将.click()更改为.selected和.unselected：

$(document).on("click",".unselected",function(){
    // toggle your classes here
});

Answer 3

Document.Ready会在Document加载后立即执行。

我不确定，但是这个特定的问题说，是的，只要DOM加载，就会定义document.ready中的函数。现在，当DOM加载时，它只发现div“未选中”。因此，它将相应的函数绑定到此类。另一方面，它无法找到div“selected”，因此无法将bind函数绑定到此类。

如果有正确的话，我会请求任何专家为这个答案辩护。否则告诉什么是对的！。

jquery - 事件监听器：为什么只有一个脚本有效？

3 个答案: