Can't access the DOM of html loaded by jQuery

Question

I have a page with an empty div and when the user clicks on a button, a jQuery function is executed and loads some content. The problem I have is that I can't access the elements inside the div.

For example, if a link is loaded, if I have a function that executes when a link is clicked, it has no effect since the link is loaded content.

EDIT: an example code of how I load content.

$('#all').click(function(e){
    e.preventDefault();
    all = true;
    $.ajax({
        type: 'POST',
        url: './?ajax=cars',
        data : {all : true},
        success: function(data){
            $('#ajaxTable').html(data);
        }
    });
});

You'll need to use live bindings for the new links to subscribe to the click event. — Jamie Dixon, Nov 19 '13 at 20:30
please do not use live, it no longer exists in jquery use $("parentSelector").on("click", "actual element", function(){ //code goes here }); — eg_dac, Nov 19 '13 at 20:31
Ops, linked an old dupe. This dupe is more up to date: [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/q/1359018/1331430) — Fabrício Matté, Nov 19 '13 at 20:33
Where is this script included? If it's in the header it won't work. — Augusto, Nov 19 '13 at 21:31

score 4 · Answer 1 · answered Nov 19 '13 at 20:48

Replace:

$('#all').click(function(e){ /* code here */ });

With:

$(document).on('click', '#all', function(e){ /* code here */ });

The #all element is created after the click event is assigned so it won't apply to a new #all element. Using $(document).on() any #all contained inside the document regardless of load time will observe the event.

Can't access the DOM of html loaded by jQuery

1 Answers1