时间戳

首页 > 解决方案 > 需要将 onblur 更改为 onclick 的说明

jquery - 需要将 onblur 更改为 onclick 的说明

问题描述

我正在努力采用所见即所得编辑器 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'回调转换为按钮点击功能？任何建议都非常感谢，问候

标签： jqueryonclickonblur

解决方案

You can bind a value to the this keyword inside a funciton by using the 'Function.prototype.bind()' function on it.

I'm assuming there is only one .editable element on the page in this code example:

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

推荐阅读