Onblur does not fire

Question

The Scenario:

I would like to fire the function checkDOMChange (which hides ul tags that are empty) once an input is filled and unfocussed but currently, the function is not being called. Here is a fiddle.

function checkDOMChange() {
  if ($("div[id$='DoIQualify_financials'] div").hasClass("field-invalid")) {
    if ($('.borrower1Salary_errors li').length == 0) {
      jQuery("ul.borrower1Salary_errors").hide();
    }
    if ($('.borrower2Salary_errors li').length == 0){
      jQuery("ul.borrower2Salary_errors").hide();
    }
  }

There is typo error `function checkDOMChange() {` not closing well. check the console — Tamil Selvan C, Aug 28 '15 at 02:39

score 0 · Answer 1 · edited May 23 '17 at 12:06

You need to change your script to be defined when the script is being parsed, at runtime there is no field-invalid class because the DOM is empty (no HTML elements have been loaded yet).

To do this, assign the function to a variable, shown below.

checkDOMChange = function (){
       if ($("div[id$='DoIQualify_financials'] div").hasClass("field-invalid")) {
           if ($('.borrower1Salary_errors li').length == 0) {
               jQuery("ul.borrower1Salary_errors").hide();
           }
           if ($('.borrower2Salary_errors li').length == 0) {
               jQuery("ul.borrower2Salary_errors").hide();
           }
       }
   }

This way, the function is invoked after the DOM has loaded the required elements. There's a great explanation here which explains the difference in more detail.

You could also choose to put your function in a window.onload event which waits until the DOM has loaded before executing scripts.

A third option would be to put your script just before the closing body tag of your HTML (browsers read HTML top-down so it will load the DOM before reading the script tag).

You also need to close your first if statement

score 0 · Answer 2 · answered Aug 28 '15 at 03:04

   function checkDOMChange() {
       if ($("div[id$='DoIQualify_financials'] div").hasClass("field-invalid")) {
           if ($('.borrower1Salary_errors li').length == 0) {
               jQuery("ul.borrower1Salary_errors").hide();
           }
           if ($('.borrower2Salary_errors li').length == 0) {
               jQuery("ul.borrower2Salary_errors").hide();
           }
       }
   }
   $(document).ready(function () {
       $(document).on('blur', '.inputbox', checkDOMChange);
   }

This is what you want, I Guess

Onblur does not fire

2 Answers2