jQuery单击事件多次工作

Question

我正在使用jquery在点击事件中找到iframe中的每个目标元素。 但是，点击事件会在每次点击时触发多个时间。 这是我使用的代码。 我正在使用此函数在单击时设置每个目标元素的样式。 我该如何解决这个问题。

 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);
   });
 }

Answer 1

解除绑定之前，请取消绑定现有更改事件，以防止该事件多次发生

添加.off（'change'）以取消绑定所有退出的更改事件
在.on（'change'）之前绑定更改事件

$('[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);
});

Answer 2

然后可能会多次触发foralaEditor.initialized。
尝试关闭，但是在div_tag上不要点击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);
        });
     });
}