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
– Roko C. Buljan, Commented Apr 9, 2013 at 14:54
Use .on(), which is the preferred way to do delegation now. — jmar777
– jmar777, Commented Apr 9, 2013 at 14:55
Have a read at api.jquery.com/on/#direct-and-delegated-events — xec
– xec, Commented Apr 9, 2013 at 14:55
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
– jmar777, Commented Apr 9, 2013 at 15:01

fragilewindows · Accepted Answer · 2016-09-28 01:38:32Z

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, 2016 at 1:38

fragilewindows

1,4101 gold badge16 silver badges26 bronze badges

answered Apr 9, 2013 at 14:55

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brad Christie Over a year ago

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).

Roko C. Buljan · Accepted Answer · 2013-04-09 14:58:18Z

$(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.

jmar777 · Accepted Answer · 2013-04-09 14:57:06Z

1

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

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

answered Apr 9, 2013 at 14:57

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

2 Comments

David Chase Over a year ago

why go as far as document if you can find a closer static parent? thats a lot of traversing no?

jmar777 Over a year ago

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.

Collectives™ on Stack Overflow

Add button dynamically using jQuery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related