如何將加載的腳本應用到動態添加的元素？

我是Jquery的新手，正在學習它。我創建了一個非常簡單的html文件，並帶有一個動態添加新文本字段的按鈕。我面臨的問題是，添加新文本字段時，它不會像第一個文本字段那樣工作，它允許通過加載的「viettypingplus.js」腳本鍵入越南字符。此腳本不適用於通過「添加文本字段」按鈕動態添加的第二個文本字段。如何將加載的腳本應用到動態添加的元素？

我一直在尋找，但沒有找到解決辦法。請幫忙。

以下是我的html：在第一個文本字段中輸入「a6」得到：「 - 但在第二個文本字段中，我得到」a6「。

非常感謝您的幫助。

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Welcome - {% block title %}{% endblock %}</title> 

    <title>Viettyping Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <style> 
    ., body, td, th { font-family:Arial; } 
    </style> 

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="http://vietdev.sourceforge.net/jscript/viettyping/viettypingplus.js"></script> 
    </head> 

    <body bgcolor="#F0F0D0"> 

    <center> 
     <h3>Vietnamese Typing</h3> 
     <form id="TestForm"> 
     Text input: <input name="xxx"> 
     <input id="AddText" value="Add Text Field" onclick="" type="button"> 
     </form> 
    </center> 

    <br> 

    <script> 
     $("#AddText").click(function(e){ 
      $("#TestForm").append($('<td><b>Text input: <input name="test" type="text"/></b></td>')); 
     }); 
    </script> 

    </body> 
</html>

來源

2014-08-31 H. Pham

添加新元素後，您可能需要重新運行[插件]（http://vietdev.sourceforge.net/jscript/viettyping/）。 – Blazemonger 2014-08-31 03:49:26

@ jfriend00你應該把這些建議放入答案而不是評論。 – drewish 2014-08-31 04:56:16

@drewish - 你是對的 - 我添加了一個答案。 – jfriend00 2014-08-31 05:08:31

在看viettypingplus.js代碼，我沒有看到添加新動態創建的元素的任何支持。代碼似乎只在初始化時纔會查找相關輸入字段，並且沒有簡單的方法再次調用它來查找新元素。

這使得你與我能想到的幾個選項：

一種可能的解決辦法是，你可以把一些在頁面額外的元素，但他們最初隱藏的display: none。然後，viettypingplus.js將在初始化時連接到它們。然後，當你需要另一個元素時，你可以顯示一個已有的隱藏元素。
您可以修改viettypingplus.js以跟蹤它已經連接到的元素（可能通過添加屬性到每個元素添加時），然後使初始化函數避開它已經處理的元素（那些已經擁有該屬性）。這可以讓你在插入新元素後再次調用一個初始化函數，並且它會連接到它尚未處理的元素。
學習viettypingplus.js碼多一點之後，它看起來像你可以手動掛鉤，你有一個函數調用創建的每個新<input>或<textarea>元素。您可以將您的代碼改成這樣：

<script> 
    $("#AddText").click(function(e){ 
     $("#TestForm").append($('<td><b>Text input: <input name="test" type="text"/></b></td>')); 
     // manully hook up viet processing on this last field we created 
     tEvt($("#TestForm input").last().get(0)); 
    }); 
</script>

僅供參考，你真的要被追加<td>到窗體？您顯示的代碼中沒有<table>，這是<td>所屬的地方。

來源

2014-08-31 05:07:16 jfriend00

非常感謝您的快速回答。我非常喜歡你的第二個解決方案，但不知道如何實施。你知道任何醫生/職位/例子是否在做這件事嗎？再次，非常感謝您的幫助。 – 2014-08-31 13:18:59

@ H.Pham - 請參閱我上面的第三個新選項。在學習了一些代碼後，我認爲你可以手動調用一個函數來連接你新添加的元素。 – jfriend00 2014-08-31 15:42:10

jfriend00，非常感謝您的幫助。第三個選項完美工作，不需要太多的代碼。 – 2014-09-02 13:44:30

如何將加載的腳本應用到動態添加的元素？

回答

相關問題