javascript - css/javascript 元素在应该返回 true 时返回 false

Question

我有一个单域表单(文本输入和提交按钮)。这是表单代码:

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
    </li>
    <li class="td80">
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

使用 javascript，如果在文本字段中输入文本，提交按钮应该是不可点击的。如果该字段中没有文本，则它应该是可点击的。我这样做是通过使用 javascript 删除和/或放回按钮添加禁用类。这是javascript:

(function($){
    $(document).on('focusin', '#resume-field', function() {
        $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
    }).on('focusout', '#resume-field', function(){
        if(this.value==' '||this.title==this.value) {
            $(this).parents().find('.button-add').addClass('button-add-disabled');
        } else {
            $(this).parents().find('.button-add').removeClass('button-add-disabled');
        }

    });     

    $('.button-add-disabled').click(function(){
        return false;
    });
}(jQuery));

这是CSS:

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
   font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
   font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
   border-radius: 3px; }
.button-add:hover { text-decoration: none;
   -webkit-transition:none; 
      -moz-transition:none; 
       -ms-transition:none; 
        -o-transition:none; 
           transition:none; 
}
.td80 .button-add { margin-left:35px !important;  }
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px;  }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0;  }

类正在按预期更改并且 javascript 正在运行。但出于某种原因，即使 .button-add-disabled 未应用于表单元素，表单元素仍会返回 false，因此不会提交。当 javascript 删除“button-add-disabled”时，表单应该提交。我可以看到服务器日志。如果我从 javascript“return: false”中删除该行，则该表单有效，所以我知道该表单本身有效。我很确定 javascript 有问题。有什么想法吗？

Answer 1

这不是它的工作原理。事件绑定(bind)到元素，通过选择器到达；它们不受选择器的约束。

当您将事件直接绑定(bind)到元素时，事件现在绑定(bind)到该元素，直到您明确取消绑定(bind)。原始选择器不再相关。

你需要这样做，或者类似的事情:

$('.button-add-disabled').click(function(){
  return !$(this).hasClass('button-add-disabled');
});

也就是说，测试按钮是否当前在引发事件时被您的类(class)禁用。

顺便说一句，这...

if(this.value==' '||this.title==this.value) {
  $(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
  $(this).parents().find('.button-add').removeClass('button-add-disabled');
}

应该是这样的:

var disabled = this.value == ' ' || this.title == this.value;
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled);