For Each on click when cloning elements

Question

How to On each click when element is cloned remove and add classes on multiple elements?

$('.cc-form-control-switcher').each(function(){
$(".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second").on("click", function(e) {
                e.preventDefault();
                var $self = $(this);
                var $siblingSelected = $self.parent().find(".btn-switch");
                $siblingSelected.removeClass("btn-switch");
                $self.addClass("btn-switch");
                var hdnField = $self.parent().find("input[type=hidden]");

                if (hdnField.length > 0) {
                    hdnField.val($self.data("value"));
                }
            });
});

Demo here https://jsfiddle.net/etgf979x/7/

On each click 'btn-switcher' is being activated, which works but when I have cloned element it doesn't... I tried using each on click, but seems like I need advice what else I should use.

score 1 · Answer 1 · answered Jun 22 '17 at 21:35

Event binding on dynamically created elements?

$(document).on("click", ".cc-form-control-switcher .btn-first, .cc-form-control-switcher .btn-second" ,function(e) {
                e.preventDefault();
                var $self = $(this);
                var $siblingSelected = $self.parent().find(".btn-switch");
                $siblingSelected.removeClass("btn-switch");
                $self.addClass("btn-switch");
                var hdnField = $self.parent().find("input[type=hidden]");

                if (hdnField.length > 0) {
                    hdnField.val($self.data("value"));
                }
            });

For Each on click when cloning elements

1 Answers1