Нужна инструкция по изменению onblur на onclick - PullRequest
Новая
       110

Нужна инструкция по изменению onblur на onclick

0 голосов
/ 30 октября 2019

Я работаю над принятием редактора wysiwyg 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» - Как преобразовать вышеупомянутый обратный вызов «onblur» в функцию нажатия кнопки? Любой совет действительно ценится,

Ответы [ 2 ]

0 голосов
/ 30 октября 2019

Спасибо за предложенное решение - подумайте также о bind, этот предоставленный вами скрипт возвращает значение «undefined» для одного экземпляра «.editable», хотя есть еще 3 «textarea» (удаленных во время теста), которые на самом деле необходимызаменяется на лету скриптом wysiwyg (SummerNote) в редактируемом div, который вводит размытие в textarea и сохраняет, как объяснено. Спасибо за предложенный вариант, но еще предстоит изучить и предоставит дополнительную информацию по. Привет

0 голосов
/ 30 октября 2019

Вы можете привязать значение к ключевому слову this внутри функции, используя для этого функцию ' Function.prototype.bind () '.

Я предполагаю, что тамтолько один .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));
...