Why is jQuery Not Working on Elements Loaded by Ajax

You may thought the customized jQuery should be functional, but it appeared not working on specific elements. After you reviewed all the codes and found nothing wrong. I suggest you to review your codes more deeply:

The jQuery API should always be loaded first of all other customized jQuery files. You should check the order in <head> block in your page.

Another possible problem is that the elements are absent and can not be located by jQuery when the document is ready.

Some developers may load parts of content by Ajax when the document has been ready, so jQuery will not recognize the latter elements loaded by Ajax, everything on the latter elements will be in vain.

For checking the absence of a element, you can use the property length of the element to determine where should go:

$(document).ready(function() {
...
  if ($("#element_id").length) {
    alert("The element exists!");
  } else {
    alert("The element does not exist!");
  }
...
}

If some elements do not exist when the document is ready, you should move the related codes on the elements into respective Ajax block for taking effect after Ajax loading.

Leave a Reply

Your email address will not be published. Required fields are marked *