Creating a button on a webpage using jQuery dynamically

Question

Creating a button on a webpage using jQuery dynamically

I need help with adding buttons dynamically - while the first button works, the others do not. I used to utilize the live function, but it was removed in jQuery 1.9.1. How can I make sure that newly added buttons also work as intended?

HTML Snippet:

<div class="take">
    <p>This is a paragraph</p>
    <button class="test">Copy</button>
</div>

jQuery Snippet:

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

Check out the jsfiddle link for more information.

jquery html css

Answer 1

Answer №1

If you pass true in the clone function, your problem will be resolved - jsfiddle

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

Remember: Avoid using "new" as a variable name since it is a reserved keyword in JavaScript.

Answer 2

If you pass true in the clone function, your problem will be resolved - jsfiddle

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

Remember: Avoid using "new" as a variable name since it is a reserved keyword in JavaScript.

Answer 3

Answer №2

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

Instead of using document, opt for a static parent ID selector instead.

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

To illustrate:

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

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

Delegated events offer the advantage of being able to handle events from descendant elements that are added to the document later on. By selecting an element that is guaranteed to exist when the delegated event handler is attached, you can utilize delegated events to avoid constantly attaching and removing event handlers. This element could be the container element of a view in a Model-View-Controller design, or the document if the event handler needs to monitor all bubbling events in the document. The document element is accessible in the head of the document prior to loading any other HTML, making it safe to attach events there without waiting for the document to fully load.

Answer 4

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

Instead of using document, opt for a static parent ID selector instead.

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

To illustrate:

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

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

Delegated events offer the advantage of being able to handle events from descendant elements that are added to the document later on. By selecting an element that is guaranteed to exist when the delegated event handler is attached, you can utilize delegated events to avoid constantly attaching and removing event handlers. This element could be the container element of a view in a Model-View-Controller design, or the document if the event handler needs to monitor all bubbling events in the document. The document element is accessible in the head of the document prior to loading any other HTML, making it safe to attach events there without waiting for the document to fully load.

Answer 5

Answer №3

If you're looking to implement event delegation, consider using .on() method as demonstrated in this [sample](http://jsfiddle.net/vJZmj/4/):

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

Answer 6

If you're looking to implement event delegation, consider using .on() method as demonstrated in this [sample](http://jsfiddle.net/vJZmj/4/):

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

Creating a button on a webpage using jQuery dynamically

Answer №1

Answer №2

Answer №3

Similar questions

Storing css data for iPhone Facebook application

When printing a PDF, a div that is set to 100vh only takes up

What is the best way to utilize jQuery for submitting a form through ajax and then extracting and interpreting the response?

JavaScript functionality malfunctions once jQuery AJAX has finished loading on the main document

Making several fadeToggle functions with the same class name operate independently from each other

Using the power of jQuery to create straightforward CSS animations

The Ajax request is unable to locate the designated web method

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Issue with Jquery checkbox calculator constantly displaying Not a Number (NaN)

Is there a way to prevent mouse wheel scrolling on a React "number" input field?

What is the best way to utilize document.body in order to add a table to a designated DIV?

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

HTML5 canvas processing causing web worker to run out of memory

Strange spacing below body element discovered while browsing website in Firefox 7

Remove HTML formatting from excel cells and fill separate cells

Dynamically scrolling an element using jQuery without specifying specific values

How can I change the font size in PHP from each font size="" to font-size:?

What is the best way to retrieve the information stored in an object?

top margin is functioning properly in Internet Explorer, but not in Google Chrome

Is it possible to style the parent CSS file using a query?