为什么实时点击功能自动工作时，它应该只发生在点击

Why does the live click function work automatically when it should only happen upon click?

本文关键字：功能 实时 为什么 工作      更新时间：2023-09-26

我有一个按钮，用户点击(.next_1)。

<a id="next_btn" class="next_1" href="#">Next</a>

用户单击按钮后，应该将类更改为next_2。当用户再次点击按钮时，它应该将其更改为next_3。

$('.next_1').click(function() { 
  $('#next_btn').removeClass('next_1').addClass('next_2');
});
$('.next_2').live('click', function() {
  $('#next_btn').removeClass('next_2').addClass('next_3');
});

目前，当用户点击按钮时，它直接将类更改为next_3，而应该更改为next_2。为什么实时点击功能自动工作时，它应该只发生在点击?

.live()在本例中与添加另一个单击处理程序相同。我建议使用。toggle()函数。

http://api.jquery.com/toggle-event/

$('#next_btn').toggle(function() {
        $('#next_btn').removeClass('next_1').addClass('next_2');
}, function() {
    $('#next_btn').removeClass('next_2').addClass('next_3');
}, function() {
    $('#next_btn').removeClass('next_3').addClass('next_1'); // loops back to start
});

$('#next_btn').click(function(){
   if( $(this).hasClass('.next_2') ){
       $(this).removeClass('next_2').addClass('next_3');
   }else if( $(this).hasClass('.next_1') ){
       $(this).removeClass('next_1').addClass('next_2');
   } 
});

如果出于其他原因希望使用两个单独的事件处理程序，我建议停止click事件的传播，并将两者都更改为.live()。基本上，如果你要改变影响选择器的东西并且你想让这些改变反映在事件处理程序中，你要么取消绑定并重置新选择器上的事件处理程序要么使用。live():

$('.next_1').live('click', function() { 
  $('#next_btn').removeClass('next_1').addClass('next_2');
  return(false);
});
$('.next_2').live('click', function() {
  $('#next_btn').removeClass('next_2').addClass('next_3');
  return(false);
});

我认为问题在于你没有在第一次点击时阻止事件传播，这样点击就会继续上升到顶层。最后，它到达jQuery的.live()处理程序，现在您已经将类更改为"next_2"，它匹配.live()处理程序，并再次处理单击。如果您在第一个click处理程序上停止事件传播，那么当它已经被处理时，它将不会到达.live()处理程序。

另外，我认为你将不得不取消绑定第一个点击处理程序。它绑定到特定的DOM对象，而不是绑定到类，因此即使更改了类名，它仍将处理事件。或者，也可以让它们都是.live()处理程序。

如果是我，我不会为一个对象使用两个单独的事件处理程序。只需绑定一个事件处理程序，并根据状态向其添加条件逻辑。

为了多样化，这里有另一种方法，可以轻松地进入任意多个next_n级别，而无需更多代码:

$('#next_btn').click(function() {
    var $this = $(this);
    var num = $this.data("index") || 1;   // get current state
    if (num < 3) {                        // only go up to next_3
        $this.removeClass('next_' + num); // remove previous class
        ++num;                            // go up one
        $this.addClass('next_' + num);    // add the new class
        $this.data("index", num);         // store new current state
    }
});

和一个显示它的jsFiddle: http://jsfiddle.net/jfriend00/jpdjY/

或更紧凑的形式:

$('#next_btn').click(function() {
    var num = $(this).data("index") || 1;   // get current state
    if (num < 3) {                        // only go up to next_3
        $(this).removeClass('next_' + num++).addClass('next_' + num).data("index", num);         
    }
});
相关文章：