我是 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>
最佳答案
查看 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> 位于何处属于。
关于javascript - 如何将加载的脚本应用于动态添加的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25588734/