Событие размытия jQuery запускается несколько раз при редактировании динамического содержимого

Когда я нажимаю на элемент div определенного класса, я меняю contenteditable на true. onblur этого щелкнутого div, я хочу, чтобы он что-то предупредил. В первый раз, когда я размываю div, он работает нормально, но после этого он дважды показывает одно и то же предупреждение. Итак, в первый раз он предупреждает один раз. Второй раз, он предупреждает дважды и т.д.

Что я делаю не так?

content = $('#content');

content.delegate('div', 'click', function(event){
    $(this).attr('contenteditable', 'true');
    $(this).focus();
    $(this).bind('blur', function(){
        alert('blur');
    });
});

Пример: http://jsfiddle.net/W8que/4/


javascript jquery onblur contenteditable
person ddan    schedule 26.11.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы снова привязываете размытие к каждому клику. Каждая привязка новая, и они складываются. Также используйте .delegate() (или .on()) для функции размытия.

скрипка: http://jsfiddle.net/W8que/11/

код:

content = $('#content');

content.on('click', 'div', function(){
    $this = $(this);
    $this.attr('contenteditable', 'true');
    $this.focus();
});

content.on('blur', 'div', function(){
  alert('blur');
});

Поскольку скрипка уже использовала jQuery 1.7.x, я пошел дальше и заменил .delegate() на более современный .on(). Добавил несколько других вещей, таких как кэширование $(this), и не удосужился передать событие в функцию, поскольку нам не нужно ничего preventDefault() или stopPropagation() включать.

person Greg Pettit    schedule 26.11.2011