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

Question

I am new to Jquery and am learning it. 我是Jquery的新手，正在学习它。 I have a created a very simple html file with a button to add a new text field dynamically. 我创建了一个带有按钮的非常简单的html文件，以动态添加新的文本字段。 The issue I am facing is that when the new text field is added, it does not behave as the first text field, which allows to type Vietnamese characters by the loaded "viettypingplus.js" script. 我面临的问题是，添加新文本字段时，它不能像第一个文本字段那样工作，它允许通过加载的“ viettypingplus.js”脚本键入越南语字符。 This script does not work on the second text field which is added dynamically via the "Add Text Field" button. 该脚本不适用于通过“添加文本字段”按钮动态添加的第二个文本字段。

I have been searching but did not find a solution. 我一直在搜索，但没有找到解决方案。 Please help. 请帮忙。

Below is my html: Typing "a6" in the first text field i get: "â" but in the second text field I get "a6". 下面是我的html：在第一个文本字段中键入“ a6”，我得到：“â”，但在第二个文本字段中键入“ a6”。

Thanh you very much for your help in advance. 非常感谢您的提前帮助。

<!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

In looking at the viettypingplus.js code, I don't see any support for adding new dynamically created elements. 在查看viettypingplus.js代码时，我看不到添加新动态创建元素的任何支持。 The code appears to look for the relevant input fields only once upon initialization and doesn't have an easy way to call it again to find new elements. 该代码似乎仅在初始化时查找一次相关的输入字段，并且没有一种简便的方法可以再次调用它以查找新元素。

That leaves you with a couple options I can think of: 这给您提供了几个我能想到的选择：

One possible work-around is you could put a number of extra elements in the page, but have them initially hidden with display: none . 一种可能的解决方法是，您可以在页面中放置许多额外的元素，但最初使用display: none将它们隐藏起来display: none 。 Then, the viettypingplus.js will hook up to them when it initialized. 然后，在初始化时， viettypingplus.js将与它们连接。 Then, when you need another element, you can just show one of the pre-existing hidden elements. 然后，当您需要另一个元素时，您可以只显示一个预先存在的隐藏元素。
You can modify viettypingplus.js to keep track of the elements it has already hooked up to (perhaps by adding a property to each one when it is added) and then make the initialization function avoid ones it has already processed (ones that already have that property). 您可以修改viettypingplus.js来跟踪它已经连接的元素（也许在添加属性时向每个属性添加一个属性），然后使初始化函数避免已经处理过的元素（已经拥有该属性的元素）属性）。 This would allow you to call an initialization function again after inserting new elements and it would just hook up to any elements it hadn't already processed. 这将允许您在插入新元素之后再次调用初始化函数，并且它将仅连接到尚未处理的任何元素。
After studying the viettypingplus.js code a bit more, it looks like you can manually hook up each new <input> or <textarea> element that you create with a function call. 在研究了viettypingplus.js代码之后，您似乎可以手动连接使用函数调用创建的每个新的<input>或<textarea>元素。 You can change your code to this: 您可以将代码更改为此：

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

FYI, do you really mean to be appending a <td> to your form? 仅供参考，您真的要在表单中添加<td>吗？ There is no <table> in the code you showed which is where a <td> belongs. 您显示的代码中没有<table> ，这是<td>所属的位置。

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

问题描述

1 个解决方案

解决方案1
1 2014-08-31 05:07:16

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

问题描述

1 个解决方案

解决方案1 1 2014-08-31 05:07:16

解决方案1
1 2014-08-31 05:07:16