jquery click event working multiple times

Question

I am using jquery to find each target element in iframe on click event. But the click event triggers mutiple times on each click. This is the code that i used. I am using this function to style each target element on click. How can i solve this issue.

 var getElement = function () {
     $('[data-edit="froala"]').on('froalaEditor.initialized', function (e, editor) {
        var $div_tag = $('[data-edit="froala"]').find('iframe').contents().find('body');
            $div_tag.on('click', function(e) {
                var element_name = e.target.nodeName.toLowerCase();
                var $target_class = $('[data-target="'+element_name+'"]');
                trigger_object(e);
        });
     });
 }

 var trigger_object = function (e) {
   $('body').on('change', '[data-style="hr-style"]', function (event) {
       $(e.target).css($(this).data('css'),this.value);
   });
   $('body').on('change', '[data-style="div-style"]', function (event) {
       $(e.target).css($(this).data('css'),this.value);
   });
 }

Can you also add your html code? What is froala, and when do you trigger foalaEditor.initialized? — GiuServ
– GiuServ, Commented Oct 27, 2016 at 6:23
Check how often your froalaEditor.initialized is fired. You add every round an new click handler of $div_tag. — pleinx
– pleinx, Commented Oct 27, 2016 at 6:23
froala is a inline editor editor and froalaEditor.initialized is used to check froala is loaded — Yeldho Paul
– Yeldho Paul, Commented Oct 27, 2016 at 6:25
You are missing a . after find('iframe'), maybe a typo... — Ruby Racer
– Ruby Racer, Commented Oct 27, 2016 at 6:31
@pleinx thanks for the reply. Actually froalaEditor.initialized is working only once. Actually the issue happened due to the wrong way that i handle the target element. The issue is that when i click one div element in iframe i got the div target object and its wrking fine. Then i click on another div i got previos click div and current div object and its come like a loop — Yeldho Paul
– Yeldho Paul, Commented Oct 27, 2016 at 6:32

Beginner · Accepted Answer · 2016-10-27 07:17:07Z

2

unbind your existing change event before binding it to prevent event from working multiple times

add .off('change') to unbind all exiting change event
before .on('change') to bind the change event

$('[data-style="hr-style"]').off('change').on('change', function (event) {
   $(e.target).css($(this).data('css'),this.value);
});
$('[data-style="div-style"]').off('change').on('change', function (event) {
   $(e.target).css($(this).data('css'),this.value);
});

edited Oct 27, 2016 at 7:17

answered Oct 27, 2016 at 6:27

Beginner

4,1183 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Yeldho Paul Over a year ago

When i using the off event, its not working for [data-style="hr-style"] change method. Only second [data-style="div-style"] change method working. If I comment second [data-style="div-style"] change method, then first [data-style="hr-style"] change method working fine

Yeldho Paul Over a year ago

Now its working fine. But is off method is a good way?. How can i do prevent multiple times in my code

Beginner Over a year ago

.off() function is the best way to do that it unbind existing events from your element and prevent event working multiple times

Yeldho Paul Over a year ago

its working fine when using $('[data-style="hr-style"]').off('change').on('change', function (event) {

Beginner Over a year ago

@YeldhoPaul ah. I see my previous code only unbind the change event of body instead of [data-style="hr-style"] and [data-style="div-style"]

|

GiuServ · Accepted Answer · 2016-10-27 06:34:11Z

0

Then probably foralaEditor.initialized is fired multiple times.
Try with off, but on the div_tag click not on body,

var getElement = function () {
     $('[data-edit="froala"]').on('froalaEditor.initialized', function (e, editor) {
        var $div_tag = $('[data-edit="froala"]').find('iframe')contents().find('body');
            $div_tag.off('click').on('click', function(e) {
                var element_name = e.target.nodeName.toLowerCase();
                var $target_class = $('[data-target="'+element_name+'"]');
                trigger_object(e);
        });
     });
}

answered Oct 27, 2016 at 6:34

GiuServ

1,2351 gold badge15 silver badges35 bronze badges

2 Comments

Yeldho Paul Over a year ago

Thanks for the reply. Its not working. The change method inside trigger_object is working multiple times on each click in element in iframe. How can i solve this issue

GiuServ Over a year ago

@YeldhoPaul please add html code (where you use data-target) to your question.

Collectives™ on Stack Overflow

jquery click event working multiple times

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related