Question

I got the following jquery code:

$('.sub').change(function(event) {
$.post( 'get_products.php', $("#products_search").serialize(),
  function( data ) {
      console.log(data);
  },
  'json'
);
});

and have fields like

<input type="text" name="lkj" id="lkj" class="sub" value="" onfocus="if(this.value == 'Search keyword') {this.value=''}" onblur="if(this.value == ''){this.value ='Search keyword'}"  />

The form is like this:

<form action="#" method="POST" name="products_search" id="products_search">

The jquery ajax call however doesn’t fire when i change a value in lkj.

Answer 1

The change event isn’t triggered immediately for a type=text input field. It is triggered when the field loses focus. If the user never tabs out or clicks outside of the input field, then change will never fire.

This is different with checkboxes and radio buttons which do trigger the change event immediately

The input must also be present in the DOM before you bind any event listeners to it. If its injected dynamically then you can use

$('body').on('change', '.sub', function() {
  // your code goes here
});

Also, to ensure your code is being called after the DOM has loaded wrap it in

$(document).ready(function() {

});