Question

This is my jquery:

$(document).ready(function(){
    $("div#overlay div#getFBid div#overlayClose").on("click", function(){
        console.log("test")
    });
});

And this is my html, which is called with ajax:

<div id="overlay">
    <div id="getFBid">
        <div id="overlayClose">&nbsp;</div>
        <h1>Wat is mijn Facebook page ID?</h1>
        <div id="fbPageURLholder">
            <input type="text" id="fbPageURL">
        </div>
    </div>
</div>

I can’t figure out what I’m doing wrong, I’m obviously missing something that should be really simple I think.
Any thoughts?

PS. I should add to this that I saw on jquery.com that the live function is deprecated and I should use delegate or on.

Answer 1

This:

$("div#overlay div#getFBid div#overlayClose")

can be reduced to

$('#overlayClose')

since you’ll only ever have one element of that ID in your document.

As for the problem; if you’ve loaded the content with AJAX, it won’t be available in DOMReady, when you’re binding your listener.

To bind to elements that have not yet been added, you need to use a live delegate:

$(document).on('click', '#overlayClose', function() {
    console.log('test');
});

Where $(document) should be something as close to the element as possible, that is available at DOMReady, and that is not destroyed.