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

click event not working when changing id or class

本文关键字：单击 事件 不起作用 id 更改      更新时间：2023-09-26

我从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);

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

尝试

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

演示

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

$("#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');
});
相关文章：