Add button dynamically using jQuery

Question

I am trying to add a button dynamically - the first button works but not the others. I was previously using the live function, but jQuery 1.9.1 removed that function. What should I do to get the newly added buttons to work?

HTML Code:

<div class="take">
    <p>this is the para</p>
    <button class="test">copy</button>
</div>

jQuery Code:

$('.test').on('click', function() {
    var a = $(this).parent();
    new.clone().insertAfter(a);
})

Here is the jsfiddle.

The most asked question here on SO. Have you read the DOCS about `.on()` method ? it's all there! — Roko C. Buljan, Apr 09 '13 at 14:54
Use `.on()`, which is the preferred way to do delegation now. — jmar777, Apr 09 '13 at 14:55
Have a read at http://api.jquery.com/on/#direct-and-delegated-events — xec, Apr 09 '13 at 14:55
http://stackoverflow.com/questions/6658752/jquery-click-event-doesnt-work-on-dynamically-generated-elements/14533243?noredirect=1#comment22575409_14533243 — Roko C. Buljan, Apr 09 '13 at 14:56
possible duplicate of [JQuery jquery-1.7.1.min.js live() deprecated use on()](http://stackoverflow.com/questions/9805307/jquery-jquery-1-7-1-min-js-live-deprecated-use-on) — Jeremy Holovacs, Apr 09 '13 at 14:56
I think OP is not able to clone with event associated. jQIery.on is not a problem here. — Anoop, Apr 09 '13 at 14:59
Cloning with events solves OP's immediate problem, but the question was how to update the code now that `live` is deprecated (so delegation is implied). — jmar777, Apr 09 '13 at 15:01

score 7 · Accepted Answer · edited Sep 28 '16 at 01:38

7

Passing true in clone will solve your problem - jsfiddle

$('.test').on('click', function() {
    var o = $(this).parent();
    o.clone(true).insertAfter(o);        
})

Note: new is a keyword in JavaScript so don't use it as a variable.

edited Sep 28 '16 at 01:38

fragilewindows

1,394
1
15
26

answered Apr 09 '13 at 14:55

Anoop

23,044
10
62
76

To give context, passing true to `.clone()` makes it a deep copy (with events). That's why re-adding it works (though doesn't actually rely on using `.on()` correctly/as intended). – Brad Christie Apr 09 '13 at 14:58

score 2 · Answer 2 · answered Apr 09 '13 at 14:58

$(document).on('click', '.test', function() {
    var o = $(this).parent();
    o.clone().insertAfter(o);   
});

Instead of document use rather a non-dynamic parent ID selector

http://jsfiddle.net/uk6Bh/1/

To visualize:

$('#non-dynamic-parent').on('event', '.dynamic-delegated-element', function() {

http://api.jquery.com/on/ says:

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, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

score 1 · Answer 3 · answered Apr 09 '13 at 14:57

1

You want to use .on() (demo):

$(document).on('click', '.test', function() {
    var o = $(this).parent();
    o.clone().insertAfter(o);
})

answered Apr 09 '13 at 14:57

jmar777

38,796
11
66
64

why go as far as document if you can find a closer static parent? thats a lot of traversing no? – David Chase Apr 09 '13 at 15:01
1

It's still extremely cheap (click events are rare, bubbling is fast). Also, no markup further up the DOM tree was provided to incorporate in an answer. – jmar777 Apr 09 '13 at 15:06

Add button dynamically using jQuery

3 Answers3