动态点击事件未触发

Posted 2021-05-06

我有一个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
}

答案

好的，我已经弄清楚了。

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

我已经为所有按钮添加了一个新类'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");
    }
  });

});

我必须包装$（this）.toggleClass（“active inactive”）;在一个令我困惑的if语句中的陈述。

如果没有if语句，单击禁用的按钮会将其变为活动状态。为什么会这样？为什么在if语句中包装按钮时只需检查与切换相同的类就可以修复它？