我遇到了一个似乎与事件冒泡有关的问题。
当用户单击列表项时，我将该元素的 innerHTML 存储到一个变量中，并将列表项内容替换为具有新变量值的文本框。
这对于第一次点击效果很好，但是当用户点击文本框时，文本框的 html 也会被插入。
这是我的问题：http://jsfiddle.net/46Pqf/
让我感到困惑的是，我在单击时选择了一个特定的类，一旦单击事件执行，我就会将其删除。因此，该函数在单击时不应再次执行，因为选择器中的原始类不再在元素中。
对此的任何帮助将不胜感激。
【问题讨论】：
$(this) 替换为input。在这里查看：jsfiddle.net/46Pqf/7
标签： jquery click event-bubbling
点击事件附加到元素本身，而不是类。试试这个：
$('.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 + "'>";
}
});
【讨论】：
点击监听器已附加到您的 li 元素。因此，即使在用您的文本框替换内容后，仍然存在具有相同行为的相同 li 元素。
您可能想要做的是将 li 元素中的文本包装在 span 元素内，并将点击侦听器附加到该元素上。 （然后替换整个跨度）。
另一种方法是在插入文本输入后删除点击侦听器。
【讨论】：
这与事件冒泡无关
第一次点击，内部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"'>"'>
点击事件绑定到元素本身。因此，即使删除您在选择器中使用的类，事件仍然存在。
如果你委托了选择器，它会起作用，因为事件没有绑定到 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 + "'>";
});
【讨论】：
...我更喜欢这个：
$('.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);
});
【讨论】：
'this' 指的是触发事件的事物，因此您将 li 中的文本添加到文本框。
【讨论】：
这是使用纯 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');
});
【讨论】：