JQuery, событие размытия внутри события click click

Question

Я новичок в jquery, и я не могу понять, как использовать событие «размытие» внутри события «щелчок».

Мой проект имеет

• набора инструментальных средств: где есть кнопка для добавления элементов в холст
• холсте: все элементы, добавленные здесь появляются
• Редактор Окно: Где можно увидеть/редактировать элементы свойства

вот набросок моего проекта: Fiddle

Каждый элемент, который я добавляю в холст, будет иметь два представления: объект и визуальный, который является div.

Пункт: Когда я добавляю элементы в холст, я могу их щелкнуть, и я могу редактировать их атрибуты в окне редактора. Элементы имеют атрибут текста и имя.

Но если у меня есть, например, два элемента на холсте и попробуйте изменить атрибут текста одного из них (в окне редактора), он изменяет все атрибуты текста элементов. Моя проблемная функция заключается в следующем:

$(function(){ 
canvas.delegate('.myElement','click', function(){ 
    var obj = this; 
    myTextArea.val(this.text); 
    myTextArea.on('blur',function(){ 
     obj.text = myTextArea.val(); 
    }); 
}); 

});

Может ли кто-нибудь сказать мне, где я опасаюсь? Спасибо за помощь, ребята

Answer 1

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

Вы можете объявить переменную для отслеживания элемента, который кликнули:

var currentElement = null; 

А затем связать обработчик размытости:

myTextArea.on('blur',function(){ 
    if (currentElement) { 
     $(currentElement).text(myTextArea.val()); 
    } 
}); 

canvas.delegate('.myElement','click', function(){ 
    currentElement = this; 
}); 

Answer 2

функция размытия обожженных всякий раз, когда элемент теряет фокус, просто объявить событие вне функции мыши:

myTextArea.on('blur',function(){ 
      obj.text = myTextArea.val(); 
    }) 

убедитесь OBJ определен объем in.function.

Answer 3

Проблема возникает из ранее присоединенных обработчиков размывания, остаются прикрепленными и должны быть отсоединены до присоединения нового. Для отсоединения используйте .off().

$(function() { 
    canvas.on('click', '.myElement', function() { 
     var obj = this; 
     myTextArea.val(this.text).off('blur').on('blur', function() { 
      obj.text = myTextArea.val(); 
     }); 
    }); 
}); 

Это должно решить эту проблему, но вы хотели бы рассмотреть более эффективный подход, в котором один обработчик размытости остается постоянно прикрепленным к текстовому полю.

$(function() { 
    myTextArea.on('blur', function() { 
     var element = $(this).data('element'); 
     if(element) { 
      element.text = this.val(); 
     } 
    }); 

    canvas.on('click', '.myElement', function() { 
     myTextArea.val(this.text).data('element', this); 
    }); 
}); 

Здесь myTextArea.data('element') используется для хранения ссылки на самые последние .myElement щелкнули.