Button duplicate not working in jquery?

Question

I created a button(dupe of existed) onclick of existed button. But the newly created button is not going to create another button when I click.

Here is my code

$('.add-more, .dropdown button').click(function(event){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);
})

The above code working fine and creates the dupe button, But the dupe is unable to run the code on click. Please help me.

Duplicate of [http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — ibrahim mahrir, Feb 02 '17 at 05:06
You have to write you `button click event as delegates`. So it can work on every duplicate button you created by clicking one. Try to write like this `$('body').on('click','.add-more, .dropdown button',function(event){ // your stuffs goes here });` — Shubham Baranwal, Feb 02 '17 at 06:41

score 0 · Answer 1 · answered Feb 02 '17 at 05:03

0

Add the click handler to the new element.

It's probably easier to move the main logic into a separate function so you can easily attach that function as the click handler.

answered Feb 02 '17 at 05:03

minboost

2,555
1
15
15

score 0 · Answer 2 · answered Feb 02 '17 at 05:04

if the element has the same class ie .add-more and .dropdown and its a button then this is the solution

$('.add-more, .dropdown button').on('click', function(event){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);
})

score 0 · Answer 3 · edited May 23 '17 at 12:09

As shown in this same, already answered, question you'll have to use event delegation like this:

$(document).on('click', '.add-more, .dropdown button', function(event){
    // ...
})

Because dynamically created elemenets dosen't have any event handler unless they are attached to them after they were created. So instead of making an event handler on the elements themselves, you can have it on an element (a parent of those elements) that you know for sure it will be there always (here I used document, it could be any other element, the condition is it have to be there always). You attach the event handler to that fixed element (document) and telling it that when ever an event occur (first argument), check if the target element match the selector (second argument '.add-more, .dropdown button'), if so then call the function (third argument) on that element.

WHY DO DYNAMICALLY CREATED ELEMENT NOT HAVE EVENT LISTENER?:

Because, this code right here:

$('selector').click(function(){
    // ...
})

selects all the elements that match the selector ('selector') and loop through them (THE SELECTED ELEMENTS) one by one assigning the function passed as an event listener using basic JS function (addEventListener, attachEvent...). At this point when this code is run, your future dynamically created elements do not exist so they don't get attached to that event (because they do not exist yet). And by the time they do exist, this line of code $('selector').click(...) is already been executed (because javascript execute code instruction after the other, there's no comming back to a previously executed instruction). So another check to see if there is new elements that match will not happen. To understand here is a plain java script example:

function handleClick() {
    alert("Yaay! A Click Happened!");
}

// consider we have three .btn elements in DOM at this point

var btns = document.querySelectorAll('.btn'); // three elements are selected
btns.forEach(function(btn){
    btn.addEventListener('click', handleClick); // here too, just three elements get the event listener attached to them
});

// now we create another .btn
var div = document.creatElement('div');
div.className = '.btn':

// we have never ever ever ever ... called .addEventListener on the last element so clicking it will have no effect at all.

score 0 · Answer 4 · answered Feb 02 '17 at 06:28

I have done this on my own. It's working.

var addBtns = document.querySelectorAll('.add-more, .dropdown button');
addClick(addBtns);
function addClick(addBtns){
    Array.prototype.forEach.call(addBtns, function(addBtn) {
      addBtn.addEventListener('click', addClickEvent);
    });
}

function addClickEvent(e){
    var elementToBeAdded;
    if(event.target.nodeName === "IMG"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "BUTTON"){
        elementToBeAdded = event.target.parentElement.parentElement.parentElement;
    }
    else if(event.target.nodeName === "SPAN"){
        elementToBeAdded = event.target.parentElement.parentElement;
    } else{
        return false;
    }
    var newElement = elementToBeAdded.outerHTML;
    newElement = newElement.slice(0, 5) + "style='margin-top:25px' " + newElement.slice(5, newElement.length);
    newElement = $(newElement)
    $(elementToBeAdded).parent().append(newElement);

    addClick(newElement);
}

Button duplicate not working in jquery?

4 Answers4