Question

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

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

这适用于第一次点击，但当用户点击文本框时，文本框的html也会被插入。

让我感到困惑的是，我选择了一个特定的类，一旦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元素。因此，即使用文本框替换内容，也会出现具有相同行为的相同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');
});

jquery点击事件冒泡

6 个答案: