.blur not firing on previously hidden tables

Question

So the issue I seem to having is a bit of a weird one. So I have a form that is hidden until a button is clicked, once it's clicked the table is visible and has a .blur function on the inputs to check if they're empty. I've tried adding alert() throughout the pcontroller and it just never get's into the function.

Here's what's in the controller (document ready is done earlier on)

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')
    }
});

Here's the 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>

can you provide the markup please – Alex Aug 18 '16 at 09:29 — Alex, Aug 18 '16 at 09:29

Max · Answer 1 · 2016-08-18T10:46:26.103

Since I don't have all your code, I can't for sure know whether this is your problem. But I am, however, almost certain that it is, so hear me out.

The problem is that when this statement is run:

var newQuestionName = $('#questionName');

the element with id questionName hasn't yet loaded, due to the order that the DOM loads in. In order to solve this, you can wrap your JavaScript code in:

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

Try replacing your JavaScript with the following:

$(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')
        }
    });
});

EDIT: Not sure if it was added afterwards, but since you're saying that "document ready" is done earlier on, the problem is still probably related to that, considering that it works fine when I use the code I provided. Make sure that the newQuestionName variable is referring to what you want. You can check it using alert(newQuestionName.length).

.blur not firing on previously hidden tables

1 Answers1