javascript - jquery click 事件多次工作

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

在绑定(bind)现有更改事件之前取消绑定(bind)它，以防止事件多次工作

添加 .off('change') 以解除绑定(bind)所有现有的更改事件
在.on('change')之前绑定(bind)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);
});