Question

我有this代码：如果您尝试点击按钮2或3，您可以看到正确的效果。现在，返回并尝试单击按钮1：没有任何反应。

为什么呢？感谢

$('.navigatorUserButtonOff').click(function(e){
    e.preventDefault();
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

Answer 1

它无法正常工作的原因

因为您在开始时使用此选择器来绑定单击处理程序

$('.navigatorUserButtonOff')

仅选择第二个和第三个按钮。所以你只是他们绑定点击处理程序。第一个按钮没有此类，因此没有绑定点击处理程序。

两种可行的解决方案

使用delegate（您也可以使用live，但使用delegate更好，效果更快）
```
$(".navigatorUserButtons").delegate(".navigatorUserButtonOff", "click", function(evt){
    evt.preventDefault();
    // remove and add classes as desired
});
```
这个会有点问题，因为点击处理程序只会处理off状态按钮，这意味着单击on状态按钮将执行单击时发生的默认浏览器行为链接。在您的情况下，这绝对不是您所希望的，您必须将点击事件绑定到on按钮以防止默认行为。

更好的方法是使用一个单独的类来定义一个按钮，并为其on/off状态定义另一个按钮：

<a class="navigatorUserButton on">...</a>

您根本不需要off州任何委托事件：

$(".navigatorUserButton").click(function(evt){
    evt.preventDefault();
    var $this = $(this);
    if (!$this.hasClass("on"))
    {
        $this.siblings(".on").removeClass("on");
        $this.addClass("on");
    }
});

Answer 2

发生这种情况的原因是因为挂钩事件的代码只运行一次。当它运行按钮2和3符合标准并成功连接事件。稍后对DOM的更改限定了过滤器的按钮1，但它不会再次运行，因此按钮＃1不会被连接起来。

您可以使用jQuery中的live函数来解决此问题。

$('.navigatorUserButtonOff').live('click', function(e){
  e.preventDefault();

  $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
  $(this).removeClass().addClass('navigatorUserButtonOn');
});

以下是指向工作版

的链接

http://jsfiddle.net/qGMfJ/1/

Answer 3

因为点击事件未附加到第一个按钮。它仅附加到具有类navigatorUserButtonOff的项目。第一个有navigatorUserButtonOn类。您可以使用live代替

$('.navigatorUserButtonOff').live("click", function(e){
    e.preventDefault();
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

Demo

Answer 4

从我测试的内容来看，如果我更改了<div class="navigatorUserButtons"> <a id="view_tracklist" class="navigatorUserButtonOn" href="#">Button 1</a>而不是navigatorUserButtonOn，那么你将其关闭，然后它变得可点击，并像其他人一样突出显示

Answer 5

它不起作用，因为选择器正在过滤已经将类设置为navigatorUserButtonOff的元素，这是加载文档时第一个按钮所没有的。

Answer 6

这很简单。因为你做了

$('.navigatorUserButtonOff').click(...)

仅在点击navigatorUserButtonOff时才会这样做。将其更改为

$('.navigatorUserButtons a').click(...)

Answer 7

当代码运行时，它会找到所有关闭按钮（2和3，因为最初为1），并将该事件监听器添加到其click事件中。你必须为所有div的子节点执行此操作，因为该函数分配仅执行一次。

Answer 8

那是因为您要向所有navigatorUserButtonOff添加一个事件，并且在您执行该操作后立即将navigatorUserButtonOn更改为navigatorUserButtonOff，因此您必须在更改后立即将事件添加到第一个按钮

Answer 9

因为当您将事件附加到$('.navigatorUserButtonOff')元素时，第一个按钮不在其中！所以它没有得到事件处理程序。试试这个：

$('.navigatorUserButtons a').click(function(e){
    e.preventDefault();
    if($(this).hasClass('navigatorUserButtonOn'))
        return false;
    $('.navigatorUserButtons').find('.navigatorUserButtonOn').removeClass().addClass('navigatorUserButtonOff');
    $(this).removeClass().addClass('navigatorUserButtonOn');
});

处理程序没有得到一个事件

9 个答案:

它无法正常工作的原因

两种可行的解决方案