jquery click барботаж событий

Question

У меня проблема, которая, кажется, связана с пузырями событий.

Когда пользователь щелкает элемент списка, я сохраняю innerHTML этого элемента в переменной и заменяю содержимое элемента списка текстовым полем со значением новой переменной.

Это прекрасно работает для первого клика, но когда пользователь нажимает на текстовое поле, HTML-текст этого поля также вставляется.

Вот скрипка моей проблемы: http://jsfiddle.net/46Pqf/

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

Любая помощь по этому вопросу будет принята с благодарностью.

Answer 1

Событие click прикрепляется к самому элементу, а не к классу. Попробуйте вместо этого:

$('.column-header li.nottextbox').click(function(){
  if( $(this).hasClass('nottextbox') ) {
    $(this).removeClass('nottextbox');
    var text = this.innerHTML;
    this.innerHTML = "<input type='text' name='right-name' value='" + text + "'>";
  }
});​

Answer 2

Слушатель кликов прикреплен к вашему li-элементу.Таким образом, даже после замены содержимого текстовым полем присутствует тот же элемент li с тем же поведением.

Что вам может понадобиться, это заключить текст в элемент li внутри элемента spanприкрепите прослушиватель кликов к этому.(А затем заменить весь диапазон).

Другой подход заключается в удалении прослушивателя щелчков после вставки ввода текста.

Answer 3

Это не связано с всплытием событий

При первом нажатии, его внутренний html будет 'click me'

Затем вы меняете внутренний html на <input type='text' name='right-name' value="click me"'>

Во второй раз, когда пользователь нажимает, он возьмет этот новый внутренний html и сделает то же самое, став:

<input type='text' name='right-name' value=""<input type='text' name='right-name' value="click me"'>"'>

Событие click привязывается к самому элементу. Таким образом, даже удаляя класс, который вы использовали в селекторе, событие остается.

Если бы вы делегировали селектор, он бы работал, так как событие не привязано к элементу li;)

$('.column-header').delegate('li.nottextbox', 'click',function(){
  $(this).removeClass('nottextbox');
  var text = this.innerHTML;
  this.innerHTML = "<input type='text' name='right-name' value='" + text + "'>";
});

См. Скрипку: http://jsfiddle.net/46Pqf/9/

Answer 4

... и я предпочитаю это:

$('.column-header li.nottextbox').click(function(){
  $(this).removeClass('nottextbox');
  var text = this.innerHTML;
  var input = "<input type='text' name='right-name' value='" + text + "'>";
   $(this).replaceWith(input);
});​

Answer 5

Это использует чистый jQuery, а не смесь JavaScript и jQuery:

$('.column-header li.nottextbox').click(function(){
   var text = $(this).html();
   $(this).html("<input type='text' name='right-name' value='" + text + "'>");
   $(this).unbind('click');
});

Answer 6

http://jsfiddle.net/46Pqf/6/

«this» в обработчике события относится к тому, что вызвало событие, поэтому вы добавляете текст из li в текстовое поле.