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 将事件绑定到元素 ondocument.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到元素不会影响具有该类的新元素。您必须使用 jQuery.on()绑定到.unselected当前和未来的所有元素。http://api.jquery.com/on/

将您.click()的 s 更改为这样，对于.selected和.unselected：

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

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

我不确定，但是这个特定的问题表明，是的，document.ready 中的函数是在 DOM 加载后立即定义的。现在，当 DOM 加载时，它只会找到“未选择”的 div。因此，它将相应的函数绑定到这个类。另一方面，它无法找到“已选择”的 div，因此无法将绑定函数绑定到此类。

如果它是正确的，我会要求任何专家证明这个答案是正确的。否则告诉什么是对的！

于 2012-07-03T06:53:20.397 回答