动态点击事件未触发

我有一个jQuery手机页面，其中包含许多用作按钮的图像。动态点击事件未触发

最初加载页面时，所有图像都有一类“不活动”。如果我点击其中一个按钮，它的类将变为“活动”，其他所有按钮从“非活动”变为“禁用”。如果我离开页面并直接导航，则1图像仍然有一类为“活动”，其余的仍有一类为“禁用”。

当我单击活动按钮时，它将类从“活动”更改为“非活动”，并且所有其他按钮都将类从“禁用”更改为“不活动”。这使我可以选择另一个按钮作为活动按钮。

当我点击之前被禁用但现在处于非活动状态的按钮之一时，点击事件不会触发。就好像它认为该类仍然是禁用的，因为它最初加载页面时就是这样。我已经在Firefox中使用Firebug进行了检查，并且该类已正确设置为非活动状态，但仍然表现得好像该类已禁用。

这里是我的jQuery：

$(document).ready(function() { 

    $('.inactive, .active').on("click", function(){ 
    // Toggle active/inactive class 
    $(this).toggleClass("active inactive"); 

    // Disable if 1 active button, else inactive 
    if($('.active').length == 1) { 
     $('.inactive').toggleClass("inactive disabled"); 
    } else { 
     $('.disabled').toggleClass("disabled inactive"); 
    } 
    }); 

});

和HTML按钮：

<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a><br /> 
<a class="button inactive"></a>

及其类别：

.button { 
    background:url("../images/compare.png") no-repeat; 
    width: 18px; 
    height:18px 
} 
.active { 
    background-position: 0 -18px; 
    cursor:pointer 
} 
.inactive { 
    background-position: 0 0; 
    cursor:pointer 
} 
.disabled { 
    background-position: 0 -36px; 
    cursor:default 
}

来源

2012-10-21 Damian

玉家伙，我已经想通了这一点。

当我从禁用类更改为不活动时，点击处理程序不会自动附加到“新”非活动按钮。

我已经为所有按钮添加了一个新类'mybutton'（例如，一个活动按钮将是class =“mybutton active”），然后在click处理程序中查找该类，以便即使禁用按钮通过代码运行。

这是我的新代码：

$(document).ready(function() { 

    $('.mybutton').on("click", function(){ 
    if($(this).hasClass("inactive") || $(this).hasClass("active")) { 
     $(this).toggleClass("active inactive"); 
    } 

    // Disable if 1 active button, else inactive 
    if($('.active').length == 1) { 
     $('.inactive').toggleClass("inactive disabled"); 
    } else { 
     $('.disabled').toggleClass("disabled inactive"); 
    } 
    }); 

});

我不得不换行$（本）.toggleClass（ “有效无效”）;在一个if语句中的陈述让我感到困惑。

没有if语句，单击禁用的按钮会将其变为活动状态。为什么会发生这种情况？为什么在if语句中包装按钮会修复它，因为它只是检查与切换相同的类？

来源

2012-10-22 07:14:59 Damian

动态点击事件未触发

回答

相关问题