javascript - .blur 不会在以前隐藏的表上触发

Question

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

这是 Controller 中的内容(文档准备工作已提前完成)

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>

Answer 1

由于我没有您的所有代码，因此我无法确定这是否是您的问题。但我几乎可以肯定确实如此，所以请听我说完。

问题是当这个语句运行时:

var newQuestionName = $('#questionName'); 

由于 DOM 加载的顺序，id 为 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')
        }
    });
});

编辑:不确定它是否是后来添加的，但既然你说“文档准备好”是早些时候完成的，考虑到它工作正常，问题仍然可能与此相关当我使用我提供的代码时。确保 newQuestionName 变量引用您想要的内容。您可以使用alert(newQuestionName.length)进行检查。