jquery click event bubbling

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

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

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

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

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

$('.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); 
});​