Jquery click doesn't work on html created by ajax

Posted on 2012-09-11
Last Modified: 2012-09-13
I've created a page that has a empty div#info which is filled with html from an ajax request. The request gets a list of spans from another page, which is put in the div. Now if I try to use a jquery click function on those spans, nothing happens. It took me some time to realise that this is newly created html. It looks like Jquery is not aware of the new html?

How can I get this working?
Question by:R7AF
    LVL 17

    Assisted Solution

    Since you html is loaded dynamically. You should handle the click event like this..

    $("#your_selector").on("click", "tr", function(){
    LVL 42

    Accepted Solution

    Yeah, sonawanekiran is correct, you need to use the on() function. If your version of jQuery is less than 1.7 then you use delegate() instead.
    $("#info").on("click", "span", function(){
    $('#info').delegate("span", "click", function(){
    LVL 39

    Expert Comment

    by:Roger Baklund
    Either use delegated events as described above, or set the event handlers after the HTML is loaded:

    // '#info span' exists now
    $('#info span').click( ... );

    Open in new window

    LVL 13

    Expert Comment

    Or you can simply call a new on click function after your ajax loads...

    for example...basic logic only here...
    function getSpanClick() {
      //get click param after ajax is loaded...
    function ajaxCall() {
      // get information...
      // write information...
      // call next function...  

    Open in new window

    This method works 100% of the time...everytime...I've been using it ever since I've been developing with jQuery.
    LVL 13

    Author Closing Comment


    Featured Post

    Enabling OSINT in Activity Based Intelligence

    Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

    Join & Write a Comment

    Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now