Question

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

Answer 1

在查看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>所属的位置。

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

1 个答案: