Question

删除 html 类不会使用 jQuery removeClass 分离已删除的类功能

2017-01-28

78

javascript jquery html css jquery-ui-accordion

我需要禁用一个折叠元素，直到用户在另一个折叠元素中输入一些内容。我对 HTML 进行了以下设置：

       ...
        <ul>
          <li><a id="subject_link" href="#subject"> Paciente </a></li>
          <li><a id="general_link" href="#general" class="disabled">Información General</a></li>
        </ul>
       ...

它有许多其他元素，但为了说明一点，我认为这就足够了。

请注意，一般链接有一个“禁用”，旨在防止用户在未先执行某些操作的情况下导航到 HTML 的该部分。目前是这样完成的：

  $(".disabled").click( function(){
$( "#subject_link").click()// Scroll screen to target element
alert("You need to enter subject ID first");
 });

上面的代码提醒用户先输入 ID，然后将他返回到相应的折叠元素。然后，当用户输入主题 ID 时，我会触发类删除：

  if($("#tab0").valid()){
    $.post( url , values);
    // alert( "Data Loaded: " + str );
    $("#general_link").removeClass("disabled");
    $("#general_link").click();

上述操作成功删除了类（不再出现的标记“class=disabled”和样式都表明了这一点），但是单击现在未被禁用的元素仍然会触发“.disabled”的功能（提醒用户缺少 ID 并导航到相应的元素）。

我在这里遗漏了什么???

Answer 1

或者使用事件委托，这样当事件发生时，将再次根据选择器检查目标元素。因此请使用以下方法：

$(document).on("click", ".disabled", function(){
    $( "#subject_link").click()// Scroll screen to target element
    alert("You need to enter subject ID first");
});

注意： 此处的 document 可以是 .disabled 元素的任何父元素。父元素越接近，检查速度就越快。（我不知道您的 HTML 的其余部分，因此如果您的 UL 位于可选择的 DIV 内，则请在上面的代码中将该选择器替换为 document ）

Answer 2

您必须使用 .off() 方法来分离该功能：

$("#general_link.disabled").off("click");
$("#general_link").removeClass("disabled");