Сбой редактора изображений на втором изображении

Question

Я делаю ссылки в вольере на файловый менеджер для редактирования изображений в моем хранилище файлов.

Начиная с большого пальца, я открываю изображение в модальное окно, как только пользователь нажимает на него, обновляя атрибут src изображения, прежде чем открывать модальное окно.

В модальном окне есть кнопка для редактирования в вольере, которая открывает вольер, загружает изображения.

Если я нажимаю на thumb1, а затем редактирую изображение, все работает хорошо, как и ожидалось. У меня тогда проблемы с редактированием thumb2.

Он открывает правильное изображение в модальном окне, а затем правильно открывает изображение в вольере, как и ожидалось. Однако при загрузке окна вольера что-то не так в исходном размере.

Сначала отображается временное изображение, а затем за этим изображением изменяется его размер (появляется увеличенное изображение). Временное изображение остается на экране, а затем разбивается вольер.

При новой загрузке все работает как положено, но не при второй загрузке.

Ошибка, которую я вижу в журнале консоли:

Uncaught TypeError: Cannot call method 'isUsingHiResDimensions' of undefined 

Есть ли способ, как только я закрою модальное изображение на первом изображении, чтобы очистить любые настройки вольера, чтобы он в следующий раз стал чистым?

Я звоню вольер с этой функцией:

$(document).ready(function() {
    $('.thumbnail').click(function(event) {
        var imagePreview = $('#image1');
        imagePreview.attr('src',$(this).attr('href'));
        $('#editImageLink').click(function(event) {
            return launchEditor('image1', imagePreview.attr('src'));
        });
        $('#imagePreview').modal('show');
        return false;
    });
});

Моя инициализация вольера здесь:

var featherEditor = new Aviary.Feather({
    apiKey: 'mycode',
    apiVersion: 3,
    theme: 'dark', // Check out our new 'light' and 'dark' themes!
    tools: 'all',
    appendTo: '',
    onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
    },
    onError: function(errorObj) {
        alert(errorObj.message);
    }
});
function launchEditor(id, src) {
    featherEditor.launch({
        image: id,
        url: src
    });
    return false;
}

Не уверен, что мне нужно сделать, чтобы очистить и начать заново, кроме обновления страницы, любая помощь приветствуется.

Answer 1

Вы связываете все больше и больше событий кликов с editImageLink поэтому код там выполняется не раз.

Правильная привязка будет:

$(document).ready(function() {
    var imagePreview = $('#image1');

    $('.thumbnail').click(function(event) {
        imagePreview.attr('src',$(this).attr('href'));
        $('#imagePreview').modal('show');
        return false;
    });

    $('#editImageLink').click(function(event) {
        return launchEditor('image1', imagePreview.attr('src'));
    });
});