On click function not working with cloned element

Question

I'm trying to create a button that duplicates the container it is in. My function adds a button as a jQuery object to the container and I define an on click function to it. The button gets added to the container, but the on function doesn't.

  add_btn:function(target){
    let $add_btn= $('<a></a>').addClass('btn-success btn add_btn').attr('href','#').on('click',function(e){
        e.preventDefault();
        alert(':)');
        dyn_form.add_btn($(this));
    });
    //let $remove_btn = $('<a></a>').addClass('btn-error btn remove_btn').html('<i class="icon icon-delete"></i>').attr('href','#');
    let $btn_holder =$('<div></div>').addClass('btn_holder col-12');
    if(typeof target==='undefined'){
    $(this.g.target.find('.form-group')).each(function(i){
        let title = $(this).find('.form_title').attr('data-subtitle')+' '+dyn_form.lang.add_btn;
        $add_btn.text(title);
        $add_btn.clone().appendTo($btn_holder);           
        $btn_holder.appendTo($(this));
    });
    }else{
        let content=target.parents('.form-group');
        content.clone().insertAfter(content);
    }
}

`this.g.target` what's that? And why is `this.g.target.find('.form-group')` wrapped into `$()`? *"but the on function doesn't"* - doesn't what? Why do you use `` ? Anchors are meant to navigate! If you need a **button** than use a ` — Roko C. Buljan, Jul 15 '23 at 20:35
jquery clone doesn't clone events unless you call with a parameter, [then it does](https://stackoverflow.com/a/9549716/3807365) — IT goldman, Jul 15 '23 at 22:59
`this.g.target = $('form#mainform');` its a variable i declared earlier in the code. The second answer helped a lot. i had to add `$add_btn.clone(true).appendTo($btn_holder);` so it copied the events i declared. — Chris Wiese, Jul 18 '23 at 15:57

On click function not working with cloned element

0 Answers0