jQuery单击事件冒泡

Question

我遇到的问题似乎与事件冒泡有关。

当用户单击列表项时，我将该元素的innerHTML存储到变量中，并将列表项内容替换为具有新变量值的文本框。

第一次单击时效果很好，但是当用户单击文本框时，也会插入文本框的html。

这是我的问题的小提琴： http : //jsfiddle.net/46Pqf/

令我感到困惑的是，我正在选择click上的特定类，一旦单击事件执行，该类将被删除。 因此，单击该函数后不应再次执行，因为选择器中的原始类不再位于元素中。

任何帮助，将不胜感激。

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-元素。

您可能想要做的是将文本包装在span元素内的li元素中，然后将click-listener附加到该元素上。 （然后替换整个跨度）。

另一种方法是在插入文本输入后删除点击侦听器。

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

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

事件处理程序中的“ this”是指触发事件的事物，因此您要将li中的文本添加到文本框中。

Answer 6

这使用的是纯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');
});