jquery - 提交表单时jquery无法识别动态类更改

Question

我有一个带有“.disable”类的锚标记和将其切换为“.enable”的脚本。

if((counter.text() < 140) && (counter.text() >= 0)) {
  $('#tweet').addClass("enable");
  $('#tweet').removeClass("disable");
} else {
  $('#tweet').addClass("disable");
  $('#tweet').removeClass("enable");
}

锚点用于提交表单，但仅当类设置为“.enable”时。

$(document).ready( function(){
  $(".enable").click( function(e){
    (e).preventDefault();
    $("#myform").submit();
  });
});

但是，这行不通。第二个脚本似乎无法识别动态 .class 更改。如果我将上面代码中的类更改为“.disable”，它就可以工作。

知道为什么吗？

Answer 1

试试这个：

$(document).ready( function(){
  $("#tweet").click( function(e){
    (e).preventDefault();
    if ($(this).hasClass("enable")) {
       $("#myform").submit();
    }
  });
});

Answer 2

您的代码无法正常工作的原因是您的代码仅enable将事件附加到在页面加载时具有该类的元素，而这很可能没有。因此，永远不会附加任何事件处理程序，并且您的代码将永远不会运行。为了让您的处理程序更新您的类添加/删除，您应该使用.on()（如果您使用的是 jQuery 1.7+）或.delegate()（如果您使用的是早于 1.7 的 jQuery）：

要使用on()：

$(function() {
    $("body").on("click", ".enable", function(e) {
        e.preventDefault();
        $("#myform").submit();
    });
});

要使用delegate()：

$(function() {
    $("body").delegate(".enable", "click", function(e) {
        e.preventDefault();
        $("#myform").submit();
    });
});