I'm having a problem where after dynamically populating an element via AJAX, my jQuery functions aren't working on the new content.

I have a list of files for example that is populated when hitting a "refresh" button. I want to display an alert with the filename when double clicking the item in the list. Each item has the "file" class.

I'm using this code:

$('.file').on('dblclick', function(event){
                alert($(this).html());
            });

This works for any elements that are there in the first place, but not after the AJAX call.

This is a school assignment and I'm required to use regular Javascript AJAX methods, rather than the built-in jQuery AJAX functionality. I'm guessing this is the problem and the reason that jQuery is not noticing the newly populated elements.

The refresh button is calling this function:

function getFileList()
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("files").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","filelist.php",true);
        xmlhttp.send();
    }

How can I get jQuery to notice these new elements properly if I'm being forced to use regular JS for the AJAX calls as opposed to jQuery's AJAX methods?

I'm having a problem where after dynamically populating an element via AJAX, my jQuery functions aren't working on the new content.

I have a list of files for example that is populated when hitting a "refresh" button. I want to display an alert with the filename when double clicking the item in the list. Each item has the "file" class.

I'm using this code:

$('.file').on('dblclick', function(event){
                alert($(this).html());
            });

This works for any elements that are there in the first place, but not after the AJAX call.

This is a school assignment and I'm required to use regular Javascript AJAX methods, rather than the built-in jQuery AJAX functionality. I'm guessing this is the problem and the reason that jQuery is not noticing the newly populated elements.

The refresh button is calling this function:

function getFileList()
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("files").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","filelist.php",true);
        xmlhttp.send();
    }

How can I get jQuery to notice these new elements properly if I'm being forced to use regular JS for the AJAX calls as opposed to jQuery's AJAX methods?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Nov 22, 2012 at 17:29 ARWARW 3,41677 gold badges3434 silver badges4343 bronze badges 2

• Have you tried jQuery.live() instead of .on()? – FixMaker Commented Nov 22, 2012 at 17:32
• That works actually, I didn't try that because the jQuery documentation said that had been deprecated in favor of .on(). Can you point me to a resource that explains how to best replace .live() with more current code? Thanks a lot! – ARW Commented Nov 22, 2012 at 17:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

The problem is that you are only attaching .on() to the ".file" elements that exist initially. You just need to attach the .on() to the document and supply the selector as an option. e.g.

$(document).on('dblclick', '.file', function(event){
    alert($(this).html());
});

That way the event will be attached to future elements of class "file".

jQuery.on bind to elements already in the DOM. If you need bind to future elements, you can use jQuery.live or unbind and rebind with jQuery.on again. The former is easier.

$('.file').live('dblclick', function(event){
    alert($(this).html());
});

EDIT: As mentioned, live is deprecated and slow. Always prefer on.