Question

I’m trying to find out if its possible to create a class clicklistener. When i create a div listener, i can first add the listener and afterwards i can create the div.

So i want to create the listener first and later i add the class. Is it possible?

html:

<div>
    <div id="1">
        <div id="2">
            <!-- will be created.. -->
        </div>
    </div>
</div>

js:

$(".welcome").click(function() {
    alert("Hi there");
});

// Later the class album will be loaded
// When you put it above it will work..
welcome = document.getElementById("2");
welcome.innerHTML = '<div id="3" class="welcome"> Hello</div>';

I made a jsfiddle to test.

Answer 1

yes…use on event delegate…

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

try this

 $(document).on('click','.welcome',function() {
    alert("Hi there");
 });

even more better is if u attached the event to closest element…in your case that is div with id #2 <div id=2>

$('#2').on('click', '.welcome', function() {
   alert("Hi there");
});

fiddle here