更改 id 或类时单击事件不起作用答案

【问题标题】：click event not working when changing id or class更改 id 或类时单击事件不起作用
【发布时间】：2014-05-05 09:05:30
【问题描述】：

我从 jquery 开始，这里有一个问题：

http://jsfiddle.net/8guzD/

$('#test.off').click(function(){
    $(this).removeClass('off').addClass('on');
 });
$('#test.on').click(function(){
    $(this).removeClass('on').addClass('off');
    alert('ok');
});

代码的第一部分运行良好，类被应用，但是当我在这个元素中附加一个事件及其新类时，它就不起作用了。

谁能解释一下到底是什么问题？

我尝试过使用 javascript， http://jsfiddle.net/R5NRz/

var element = document.getElementById('test');

element.addEventListener('click', function() {
    this.id ='test2';
    alert("ok");
}, false);

var element2 = document.getElementById('test2');

element2.addEventListener('click', function() {
    alert("ok2");
}, false);

它并没有真正帮助我，遇到同样的问题

【问题讨论】：

标签： javascript jquery events dom

【解决方案1】：

试试

    $(document).on("click",'#test.on',function(){

        $(this).removeClass('off').addClass('on');
        alert('ok');
 });


$(document).on("click",'#test.off',function(){

        $(this).removeClass('off').addClass('on');
        alert('ok passs');
 });

Demo

【讨论】：

【解决方案2】：

在您的 jQuery 示例中，您将绑定到当时存在的 DOM 元素。这就是为什么你看到第一场火灾而不是第二场火灾的原因。运行代码时，它与您的“#test.on”选择器不匹配。你想要做的是使用委托：

$('#test').on('click',function() {
   var ele = $(this);
   if (ele.hasClass('on')) {
    ele.removeClass('on').addClass('off');
   } else {
    ele.removeClass('off').addClass('on');
   }
});

这假设您所做的不仅仅是切换类。如果您只想简单地切换类，那么一个更简单的解决方案是选择一个作为默认值并将另一个用作标志。例如，.on 开启，但没有 .on 则关闭。然后你可以使用切换：

   $('#test').on('click', function() {
      $(this).toggleClass('on');
   });

【讨论】：

【解决方案3】：

$("#test.on")

不绑定任何东西。试试这个：

$('#test').click(function() {   
  if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');   
  else $(this).removeClass('on').addClass('off'); 
});

您可以考虑改用“活动”类并切换它，而不是使用两个单独的开/关类。然后你可以写：

$("#test").click(function() {
  $(this).toggleClass('active');
});

【讨论】：