Question

我正在使用jquery在click事件中查找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（＆＃39;更改＆＃39;）以取消绑定所有现有的更改事件在.on（＆＃39;更改＆＃39;）之前绑定更改事件

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

jquery点击事件多次工作

2 个答案: