jquery点击事件冒泡

我有一个似乎与事件冒泡有关的问题。jquery点击事件冒泡

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

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

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

什么让我困惑的是，我选择在点击其中我删除一旦点击事件执行一个特定的类。因此，由于选择器中的原始类不再位于元素中，因此该函数在单击时不应该再次执行。

任何帮助，将不胜感激。

来源

2012-03-09 sadmicrowave

尝试用'input'替换'$（this）'。检查它在这里：http://jsfiddle.net/46Pqf/7/ – 2012-03-09 14:40:06

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 + "'>"; 
    } 
});

来源

2012-03-09 14:38:01

click-listener连接到你的li元素。因此，即使在用文本框替换内容之后，也会出现具有相同行为的相同li元素。

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

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

来源

2012-03-09 14:38:14 svjson

这是不相关的事件冒泡

的第一次点击，它的内部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 + "'>"; 
});

见琴：http://jsfiddle.net/46Pqf/9/

来源

2012-03-09 14:39:34 Andre

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

'这个'从事件处理程序中引用触发事件的事件，因此您将文本从li添加到文本框。

来源

2012-03-09 14:41:02 reach4thelasers

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

来源

2012-03-09 14:42:13

jquery是JavaScript！这是一个用JavaScript编写的JavaScript框架。 – 2012-03-09 14:47:45

是的，但是如果你使用的是框架，你可以使用它来获得优势。不要混合html（）和innerHtml，$（this）和this。 – 2012-03-09 14:51:25

...我更喜欢这一个：

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

来源

2012-03-09 14:46:28

jquery点击事件冒泡

回答

相关问题