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點擊事件冒泡

回答

相關問題