.blur没有在以前隐藏的表上触发

时间:2016-08-18 09:25:35

标签: javascript jquery blur

所以我似乎遇到的问题有点奇怪。所以我有一个隐藏的表单,直到单击一个按钮,一旦单击该表,该表是可见的并且在输入上有一个.blur函数来检查它们是否为空。我已经尝试在整个pcontroller中添加alert()并且它永远不会进入函数。

这是控制器中的内容(文档准备工作在之前完成)

var newQuestionName = $('#questionName'); 

function basicValidate(object) {
    var val1 = object.val();
    if (val1 != null && val1 != ' ' && val1 != '') {
        // invalid
        object.removeClass('error');
        return true;
        // alert('true');
    } else {
        // true
        object.addClass('error');
        return false;
        // alert('invalid');
    }
}

newQuestionName.blur(function () {
    alert('TEST');
    if (basicValidate($(this))) {
        add_newQuestionName_valid = true;
        alert('new question true')
    } else {
        add_newQuestionName_valid = false;
        alert('new question false')
    }
});

这是HTML

<form action="">
    <div class="row">
        <label for="questionName">
            FAQ Question:
        </label>
        <div class="input-container">
            <input id="questionName" type="text" class="text" value="">
        </div>
    </div>
    <div class="row">
        <label for="questionAnswer">
            FAQ Answer:
        </label>
        <div class="input-container">
            <textarea id="questionAnswer" cols="30" rows="10"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="submit-container submit" >
            <div type="submit" ng-click="newFaq()"  id="addNew" class="button" value="save">save</div>
        </div>
    </div>
</form>

1 个答案:

答案 0 :(得分:1)

由于我没有您的所有代码,我无法确定这是否是您的问题。但是,我几乎可以肯定它是,所以请听我说。

问题在于运行此语句时:

var newQuestionName = $('#questionName'); 
由于DOM加载的顺序,

标识为questionName的元素尚未加载。为了解决这个问题,您可以将JavaScript代码包装在:

$(document).ready(function() {
  ...
});

尝试使用以下内容替换您的JavaScript:

$(document).ready(function() {

  var newQuestionName = $('#questionName');

  function basicValidate(object) {
        var val1 = object.val();
        if (val1 != null && val1 != ' ' && val1 != '') {
            // invalid
            object.removeClass('error');
            return true;
            // alert('true');
        } else {
            // true
            object.addClass('error');
            return false;
            // alert('invalid');
        }
    }

    newQuestionName.blur(function () {
        alert('TEST');
        if (basicValidate($(this))) {
            add_newQuestionName_valid = true;
            alert('new question true')
        } else {
            add_newQuestionName_valid = false;
            alert('new question false')
        }
    });
});

编辑:不确定之后是否添加了,但是因为您已经说过&#34;文档已准备好&#34;在早些时候完成,问题仍然可能与此有关,考虑到当我使用我提供的代码时它工作正常。确保newQuestionName变量指的是您想要的内容。您可以使用alert(newQuestionName.length)进行检查。