如何将加载的脚本应用到动态添加的元素？

我是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

如何将加载的脚本应用到动态添加的元素？

回答

相关问题