jquery clone and add event

Question

I'm trying to clone a "div" and all inside it but one of the events disappear in the cloned div (I'm pretty new to web developing so ... I "cloned" a code found on SO).
The missing event is added with the following javascript:

var MyClass = document.querySelectorAll(".BtnOptList"); 
for (var ii = 0; ii < MyClass.length; ii++) {
    MyClass[ii].addEventListener('click', H_S_Btns_Func, false); 
}

Then, to clone the div, I use the following function:

$('#btnAddFlds').click(function () {
    //Count "cloned divs" we currently have 
    //This will be also used as numeric ID of the new input(s) field(s) (1st have no number)
    var DivNum = $('.SDetails').length; 
    // clone() element and update its id(s)
    var newElem2 = $('.SDetails:first').clone().attr('id', function( i, val ) {
                                                            return val + DivNum;
                                                            });
    // manipulate the id values of the input inside the new element
    newElem2.find('input,.BtnOptList,.HideIt').each(function(){
                                        $(this).attr('id', function( i, val ) {
                                                            return val + '_' + DivNum;
                                                            });
                                        });
    //Try to add function (DOESN'T WORK)
    newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false); 

    //I omitted other stuff
});

I've already tried clone(true,true) but doesn't worked

Use Event delegation `$(parentStaticElement).on('click', '.BtnOptList', H_S_Divs_Func)` and use `.on()` to bind event handler — Satpal, Dec 05 '17 at 11:10
@Satpal Thanks, but I said I'm new... can you explain me better please? — genespos, Dec 05 '17 at 11:12
Using [`.on()`](http://api.jquery.com/on) to attach event handler when using jQuery object and learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) approach, when generating elements dynamically. — Satpal, Dec 05 '17 at 11:14

score 4 · Answer 1 · edited Dec 10 '19 at 10:48

4

According to the documentation using clone with true means

A Boolean indicating whether event handlers and data should be copied along with the elements. (v1.4 onwards)

Hence, use

.clone(true)

instead of

.clone()

Ref: http://api.jquery.com/clone/

edited Dec 10 '19 at 10:48

Syed Waqas Bukhary

5,130
5
47
59

answered Dec 05 '17 at 11:15

Vipin Kumar

6,441
1
19
25

score 1 · Accepted Answer · answered Dec 05 '17 at 11:11

1

This (newElem2.find('.BtnOptList').each().addEventListener('click', H_S_Divs_Func, false);) is not how you use jQuery's each. Have a look at https://api.jquery.com/each/

Spoiler: newElem2.find('.BtnOptList').each(function(i,e){e.addEventListener('click', H_S_Divs_Func, false)})

PS: Since you're using jQuery, you can use it's own event methods and add the listeners to the whole list:

newElem2.find('.BtnOptList').on('click', H_S_Divs_Func, false)

answered Dec 05 '17 at 11:11

Ruben Serrate

2,724
1
17
21

The jQuery way you suggested doesn't work, maybe because the function is into a javascript varible ? But the 1st code is OK. Thanks ;) – genespos Dec 05 '17 at 11:51

jquery clone and add event

2 Answers2