需要将 onblur 更改为 onclick 的说明答案

【问题标题】：Need instruction for changing onblur to onclick需要将 onblur 更改为 onclick 的说明
【发布时间】：2019-10-30 11:25:51
【问题描述】：

我正在努力采用所见即所得编辑器 SummerNote，因为脚本使用“onblur”回调函数保存时出现问题，我想在点击事件时将其转换为。

这是保存页面的功能，

$(function() {
    var editElements = {};
    $('.editable').summernote({
        airMode: false,
        toolbar: [
            // [groupName, [list of button]]
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['fontsize', 'color']],
            ['para', ['paragraph']],
            ['insert', ['link','image', 'doc', 'video']], // image and doc are customized buttons
            ['table', ['table']],
            ['misc', ['codeview']],
        ],
        placeholder: 'Click here to enter content.',
        callbacks: {
            onChange: function(contents, $editable) {
                editElements[$(this).attr('id')] = contents;
            },
           /* onBlur: function() {
                if (editElements[$(this).attr('id')]!=undefined) {
                    var id = $(this).attr('id');
                    var content = editElements[$(this).attr('id')];
                    var target = ($(this).attr('data-target')!=undefined) ? $(this).attr('data-target'):'pages';
                    editElements[$(this).attr('id')] = undefined;
                    $.post("",{
                        fieldname: id,
                        content: content,
                        target: target,
                        token: token,
                    })
                    .done(function() {
                        $("#save").show();
                        $('#save').delay(100).fadeOut(); 
                    });
                }
            } */
        },
    });
});

这是尝试在点击事件函数中采用 onblur 回调并返回空内容。

$(document).on('click','#addsave', function(e){
            editElements[$(this).attr('id')] = contents;
                      if (editElements[$(this).attr('id')]!=undefined) {
                    var id = $(this).attr('id');
                    var content = editElements[$(this).attr('id')];
                    var target = ($(this).attr('data-target')!=undefined) ? $(this).attr('data-target'):'pages';
                    editElements[$(this).attr('id')] = undefined;
                    $.post("",{
                        fieldname: id,
                        content: content,
                        target: target,
                        token: token,
                    });  
                  }
              });

然而，正如我被告知的那样，这在错误指向 $(this) 选择器时不起作用，因为它指的是单击按钮实例上的可编辑内容区域为空。所以问题是函数引用或选择器，因为 '.editable' 被加载为 'div class editable' - 如何将上面的 'onblur' 回调转换为按钮单击功能？任何建议都非常感谢，问候

【问题讨论】：

标签： jquery onclick onblur

【解决方案1】：

您可以使用函数上的“Function.prototype.bind()”函数将值绑定到函数内的this 关键字。

我假设在此代码示例中页面上只有一个 .editable 元素：

// create your event handler
var save = function() {  
    editElements[$(this).attr('id')] = contents;
    if (editElements[$(this).attr('id')]!=undefined) {
        var id = $(this).attr('id');
        var content = editElements[$(this).attr('id')];
        var target = ($(this).attr('data-target')!=undefined) ? $(this).attr('data-target'):'pages';
        editElements[$(this).attr('id')] = undefined;
        $.post("",{
            fieldname: id,
            content: content,
            target: target,
            token: token,
        });  
    }
}

// get a reference to the .editable elemement
var that = document.getElementsByClassName('.editable')[0];

// bind it to 'this' in our click event handler
$(document).on('click','#addsave', save.bind(that));

【讨论】：

【解决方案2】：

感谢建议的解决方案 - 也考虑了绑定，您提供的脚本正在为单个“.editable”实例返回“未定义”值，尽管实际上还需要 3 个“textarea”（在测试期间删除）由 wysiwyg(SummerNote) 脚本动态替换为可编辑的 div，并在 textarea 中注入模糊并按说明保存。感谢您提出的选项，但必须进一步检查，并将提供更多信息。问候

【讨论】：