Why is jQuery Not Working on Elements Loaded by Ajax

  • by
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.
  • One 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 and then determine where to 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 *