使用FORM替換HTML元素文本，無法點擊輸入字段

我對這個問題感到有點困惑了幾天。背景是我編寫了一個包含表格的頁面，我希望能夠點擊表格內容中的文本來編輯它們。我寫了一些JS（嗯，我使用JQuery），它似乎並沒有工作。我可以讓文本更改爲輸入字段，但努力點擊它。更奇怪的是，我可以在文本框中進行選擇。使用FORM替換HTML元素文本，無法點擊輸入字段

作爲使代碼更簡單的概念證明，我創建了一個正在做同樣事情的測試HTML/JS頁面。

如果任何人都可以請幫助我指出這個問題很好。我必須承認，我現在只是學習JS/JQuery。

在此先感謝

韋恩

HTML文件

<html> 
    <head> 
    <title>Testing Page</title> 
    </head> 
    <body> 
    <p id="test" class="testclick"> 
    Boo 
    </p> 
    <script src="jquery-1.11.3.min.js"></script> 
    <script src="test.js"></script> 
    </body> 
</html>

test.js文件

$(document).on('click','.testclick',function(){ 
    var element_text; 
    element_text = '<form name="test_form" method="">'; 
    element_text += '<input type="text" name="name" placeholder="Boo" value="">'; 
    element_text += '</form>'; 
    $('#test').html(element_text); 
    console.log(element_text); 
})

來源

2015-10-02 Smurf

每次單擊輸入元素上，該事件bubbles up the DOM tree，並最終遇到父代<p>標記。由於該標籤仍具有testclick類，因此您的代碼將再次運行，並用新副本替換表單和輸入元素。

最簡單的解決辦法是刪除CSS類，當你更換內容：

$(document).on('click','.testclick',function(){ 
    var element_text; 
    element_text = '<form name="test_form" method="">'; 
    element_text += '<input type="text" name="name" placeholder="Boo" value="">'; 
    element_text += '</form>'; 
    $('#test').html(element_text).removeClass('testclick'); 
    console.log(element_text); 
})

jsFiddle

來源

2015-10-02 17:36:28

難以置信，這麼明顯，不能相信我沒有枝杈。謝謝 – Smurf

使用FORM替換HTML元素文本，無法點擊輸入字段

回答

相關問題