CODEWITHSUNDEEP
dynamicjquery
Chris
Chris

Reputation: 889

jQuery dynamically generated content - clicks not working

I have a page where I dynamically add in divs, as such:

$(divCol).insertAfter(parentNewRow.children('.edCol:last'));

This inserts another duplicate div after the last .edCol div. Everything works well, except for the fact that with the new .edCol div, none of the buttons work anymore. All the jQuery functions that work perfectly on the original div now do nothing. The code is identical in the new div, all the classes are the same etc, yet nothing works.

Clearly I am missing something. Can anyone shed any light on this? Any help would be much appreciated.

Upvotes: 0

Views: 2477

Answers (4)

Abhishek
Abhishek

Reputation: 357

$(document).on("click", ".my_Class", function (e) {
        alert("Works Fine");
    });

Upvotes: 0

juan.facorro
juan.facorro

Reputation: 9930

jQuery documentation indicates live() is deprecated you should use the on() function.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

Here's an example that you can see working in this fiddle.

$(function() {
    $('#container').on('click', 'div', function() {
        console.log('clicked');
    });

    $('#container').append($('<div>BLE</div>'));
});​

And the HTML that goes with it:

<div id="container">
    <div>BLA</div>
</div>​

EDIT

Please check out the following fiddle that's a more complete example and will probably clarify your doubts about how the on() method is used: DEMO.

HTML

<div id="container">
    <div>
        First you have these buttons with the bound click handler<br/>
        <button>One</button><br/>
        <button>Two</button><br/>
        <button>Three</button><br/>
    </div>
</div>
<hr/>
<button id="load-btn">Click this button to load the buttons below in the &lt;div&gt; above</button>
<hr/>
<div id="content">
    <div>
        These buttons are going to be loaded above.<br/>
        <button>Four</button><br/>
        <button>Five</button><br/>
        <button>Six</button><br/>
    </div>    
</div>

​JS

$(function() {
    // Bind click handler to the #load-btn which will
    // dynamically load the lower div content inside the upper div.
    $('#load-btn').on('click', function() {
        $('#container').append($('#content').html());
    });

    // Bind another click handler to all <button>s that exist at the moment
    // and that could be added dynamically inside the #container element.
    $('#container').on('click', 'button', function() {
        console.log('button ' + $(this).html() + ' clicked.');
    });
});​

Upvotes: 4

Vivek S
Vivek S

Reputation: 5550

Use jQuery's live() method. Description: Attach an event handler for all elements which match the current selector, now and in the future.

REF: http://api.jquery.com/live/

$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});

Upvotes: 2

Ene
Ene

Reputation: 464

using 'live' binding you can attach an event to elements in the future as well.

$('a').live('click' , function() {
    alert('clicked');
});

Upvotes: 1

Related Questions