Question

I have a div with an id of “close” inside a dynamically created div with an id of “box”. The following code is meant to do something whenever the user clicks on close.

$('#box').on('click','#close',function(){
    alert(1); // Test to see if the click works
});

I’m using the Big Cartel CMS and if I click close in the “live preview mode”, it seems to work fine, but whenever I actually publish the site and view it normally, it does absolutely nothing – no errors – nada.

Markup & CSS, just in case:

<div id="box"> <!-- Dynamically loaded -->
    <div id="close"></div>
    <h2 id="name"></h2>
    <div id="description">
        <p>blah...</p>
    </div>
</div>

#close{
    background: url(image-path);
    float: right;
    position: relative;
    top: 0;
    margin: 0 0 0 12px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 100;
}

What am I missing?

Answer 1

The problem is because #box is also dynamic. You need the primary selector to be an element which is available when the page is loaded.

A primary candidate would be the element in to which you are loading #box.