Question

我遇到了一个问题，如果我点击HTML元素并更改他的类，则事件不会切换到新类。搜索后我发现我必须使用on（）和stopPropagation（）。

现在我看到事件是切换，但代码没有执行。 firebug中的事件查看器显示哪个元素是使用click事件。当我点击firebug中的这一行时闪烁。所以事件似乎工作但为什么代码不执行？

  $(function(){
  $(".on").on("click",function(e){
  $(this).attr("class","off").html("off");
  e.stopPropagation();
  });

  $(".off").on("click",function(){
  $(this).attr("class","on").html("on");

   });

}）;

html很简单，只需单击它就必须更改为“关闭”并再次返回（通过单击）。

Answer 1

您应该使用“toggleClass”api。

http://api.jquery.com/toggleClass/

Answer 2

如果它只是打开和关闭，可能最好使用toggleClass

toggleClass

Answer 3

就像这样：

http://jsfiddle.net/LrGmH/

$(function () {
    $(document).on("click",".on,.off", function (e) {
        $(this).toggleClass("on off").html($(this).attr('class'));
        e.stopPropagation();
    });
});

Answer 4

Off可能没有被正确绑定（这些元素在运行时没有这个类）你想像这样处理它：

$(function() {

  $(".parentOfOn").delegate('.on',"click",function(e){
  $(this).attr("class","off").html("off");
  e.stopPropagation();
  });

  $(".parentOfOff").delegate('.off',"click",function(){
  $(this).attr("class","on").html("on");

   });


});

Answer 5

就像其他人所说的那样，使用toggleClass api可能会更好。

我相信您的原始代码无效，因为最初调用该函数时，$（“。0ff”）不会返回任何有效对象，因此未正确应用单击处理程序。尝试在点击功能中移动关闭点击处理程序，如下所示：

编辑1：原始代码无法正常工作。更新了代码并提供了jsfiddle。

$(function(){
  bindOnClick();
});


function bindOnClick(){
    $(".on").on("click",function(e){
        $(".on").unbind("click");
        $(this).attr("class","off").html("off");
        bindOffClick();

        e.stopPropagation();
    });
}

function bindOffClick(){
    $(".off").on("click",function(){
        $(".off").unbind("click");
        $(this).attr("class","on").html("on");
        bindOnClick();
        e.stopPropagation();
    });
}

jsFiddle

jQuery：切换事件和div类后无法执行代码

5 个答案: