不能对类的数组使用 `on` 方法

Question

问题：

我正在尝试创建一个 WYSIWYG 编辑器，它是模块化的，可重复用于我的博客...不幸的是，我很难让它与多个文本字段一起工作。

工作原理：

编辑器在 Iframe 上启用 document.designMode = 'on'。

首先我初始化对象：

init: function(){
    this.cacheDOM();
    this.renderEditor();
    this.enableDesignMode();
    this.bindEvents();
},

然后缓存DOM

cacheDOM: function(){
    this.$editors = $('.editor-toolbar');
    this.$iframes = $('.editor-iframe');
},

然后我用我所有的编辑器工具渲染工具栏

renderEditor: function(){
    var html = '<div class="text-editor">' +
        '<div class="btn-group">' +
            '<button class="e_bold      btn btn-sm btn-secondary" type="button"><i class="fa fa-bold"></i></button>' +
            '<button class="e_italic    btn btn-sm btn-secondary" type="button"><i class="fa fa-italic"></i></button>' +
            '<button class="e_underline btn btn-sm btn-secondary" type="button"><i class="fa fa-underline"></i></button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_align_left   btn btn-sm btn-secondary" type="button"><i class="fa fa-align-left"></i></button>' +
            '<button class="e_align-center btn btn-sm btn-secondary" type="button"><i class="fa fa-align-center"></i></button>' +
            '<button class="e_align-right  btn btn-sm btn-secondary" type="button"><i class="fa fa-align-right"></i></button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_header_2  btn btn-sm btn-secondary" type="button" value="h2">h2</button>' +
            '<button class="e_header_3  btn btn-sm btn-secondary" type="button" value="h3">h3</button>' +
            '<button class="e_header_4  btn btn-sm btn-secondary" type="button" value="h4">h4</button>' +
            '<button class="e_paragraph btn btn-sm btn-secondary" type="button" value="p">p</button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_unordered_list  btn btn-sm btn-secondary" type="button"><i class="fa fa-list-ul"></i></button>' +
            '<button class="e_ordered_list    btn btn-sm btn-secondary" type="button"><i class="fa fa-list-ol"></i></button>' +
            '<button class="e_table_separator btn btn-sm btn-secondary" type="button">1 | 2</button>' +
        '</div>' +
        '<div class="btn-group">' +
            '<button class="e_unordered_list  btn btn-sm btn-outline-success" type="button"><i class="fa fa-tag"></i></button>' +
            '<button class="e_ordered_list    btn btn-sm btn-outline-info" type="button"><i class="fa fa-tag"></i></button>' +
            '<button class="e_table_separator btn btn-sm btn-outline-secondary" type="button"><i class="fa fa-tag"></i></button>' +
        '</div>' +
    '</div>';
    this.$editors.html(html);
},

接下来我启用 designMode。我想在一个页面上拥有尽可能多的独立编辑器，因此我遍历每个 Iframe 并在每个 Iframe 上启用设计模式。

enableDesignMode: function(){

    for (i = 0; i < this.$iframes.length; i++) {
        this.$iframes[i].contentDocument.designMode = 'on';
    }
},

困难来了。我正在尝试将 this.$editors[0] 中按钮的点击事件绑定到 this.$iframes[0]，以便每个工具栏都附加到正确的编辑器 iframe。

bindEvents: function(){
    for (i = 0; i < this.$iframes.length; i++) {
        this.$editors[0].on('click', 'e_bold', function(){
            this.$iframes[i].contentDocument.execCommand('bold', false, null);
        });
    }
},

问题：

我收到这个错误，我不明白为什么：

TypeError: this.$editors[0].on is not a function

this.$editors 是类的数组...所以 .on 函数肯定适用于此。$editors[i]?

这里是fiddle：https://jsfiddle.net/7q30tuxo/1/

Answer 1

你错了，this.$editors是一个jQuery对象，不是"an array of classes"。当您执行 this.$editors[0] 时，您将获得一个实际的 HTML 元素。

on 是 jQuery 对象而非 DOM 元素的函数。用 jQuery 包裹你的 this.$editors[n]：$(this.$editors[0])

编辑：正如凯文在下面的评论中提到的，您没有 select 在 this.$editors 中使用多个元素，因此您不需要解包它：this.$editors.on('click', function(){})

需要说明的是，即使 select 编辑了多个元素，您通常也不需要解包。仅当您需要以不同方式对待 selected 元素时，才需要将它们展开。然而，这是一种味道，我建议重构您的 select or 以便它们 select 只有您打算作为一个元素操作的元素。

不能对类的数组使用 `on` 方法

Can't use the `on` method on an array of classes

html

javascript

iframe

jquery

wysiwyg

不能对 类 的数组使用 `on` 方法

Can't use the `on` method on an array of classes

html

javascript

iframe

jquery

wysiwyg

不能对类的数组使用 `on` 方法