Jquery Event Not Triggering for Dom Elements Created After Page Load

Jquery Event Not Triggering for DOM Elements Created after page load

Currently what you are using is called a direct binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).

i.e.

$(document).on('event','selector',callback_function)

Example

$(document).on('click', '.score', function(){
    //Your code
    alert("clicked me"); 
});

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

jQuery trigger on element that is added after page load

You need to use event-delegation for this:

$(document).on('mouseover', '#done', function(){
    //do something
});

You're appending content to your DOM after the event-listener for your mouseover on #done is registered. So this element does not exist at the time your binding an event to it.

Through event-delegation you are able to bind an event-listiner to an existing parent (document in this case). And this will listen to all events of its descendants matching the #done - selector.

JQuery doesn't apply to elements created after page load

You can use jQuery's 'live()' method to add event listeners to current and future nodes.

$(".month-selector").live('change', function(){
    setStones();
});

Click event doesn't work on dynamically generated elements

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

^Source

Here's what you're looking for:

var counter = 0;
$("button").click(function() {    $("h2").append("<p class='test'>click me " + (++counter) + "</p>")});
// With on():
$("h2").on("click", "p.test", function(){    alert($(this).text());});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><h2></h2><button>generate new element</button>

Events triggered by dynamically generated element are not captured by event handler

You need to delegate the event to the closest static ancestor element within the page (see also "Understanding Event Delegation"). This simply means, the element where you bind your event handler must already exist at the time the handler is bound, so for dynamically generated elements you must allow the event to bubble up and handle it further up.

The jQuery .on method is the way to do this (or .delegate for older versions of jQuery.)

// If version 1.7 or above

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

Or in older versions

// If version 1.6 or below

// note the selector and event are in a different order than above
$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});

Event binding on dynamically created elements?

As of jQuery 1.7 you should use jQuery.fn.on with the selector parameter filled:

$(staticAncestors).on(eventName, dynamicChild, function() {});

Explanation:

This is called event delegation and works as followed. The event is attached to a static parent (staticAncestors) of the element that should be handled. This jQuery handler is triggered every time the event triggers on this element or one of the descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match then your custom handler function is executed.

---

Prior to this, the recommended approach was to use live():

$(selector).live( eventName, function(){} );

However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

$(selector).live( eventName, function(){} );

... can be replaced with the following on() signature:

$(document).on( eventName, selector, function(){} );

---

For example, if your page was dynamically creating elements with the class name dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document. Though bear in mind document may not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

Any parent that exists at the time the event is bound is fine. For example

$('.buttons').on('click', 'button', function(){
    // do something here
});

would apply to

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>

---

Related Topics