Reinitialize jQuery after AJAX call

Question

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?

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, Nov 22 '12 at 17:33

score 9 · Accepted Answer · answered Nov 22 '12 at 17:38

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".

iurisilvio · Answer 2 · 2012-11-23T13:26:03.780

-2

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.

edited Nov 23 '12 at 13:26

answered Nov 22 '12 at 17:35

iurisilvio

4,868
1
30
36

1

This works, I also found that this works without using the deprecated .live() method: $(document).on('dblclick', '.file', function(event){ alert($(this).html()); }); Thanks! – ARW Nov 22 '12 at 17:35
@AdamWathan - you figured it out! do NOT use live as it's terrible inefficient and deprecated, use on(), which has two versions, one for regular handlers, and one for delegated handlers, where the parent element to listen on comes first, then the event, and then the dynamic element, like in your example above. – adeneo Nov 22 '12 at 17:38

Reinitialize jQuery after AJAX call

2 Answers2

Linked