Question

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.

Answer 1

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.');
    });
});​