How to apply loaded scripts to dynamically added element?

Question

I am new to Jquery and am learning it. I have a created a very simple html file with a button to add a new text field dynamically. 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. 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".

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>

You may need to re-run [the plugin](http://vietdev.sourceforge.net/jscript/viettyping/) after appending a new element. — Blazemonger, Aug 31 '14 at 03:49
@jfriend00 you should be putting those suggestions into an answer rather than comments. — drewish, Aug 31 '14 at 04:56

jfriend00 · Answer 1 · 2014-08-31T15:41:32.803

In looking at the viettypingplus.js code, I don't see any support for adding new dynamically created elements. 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. Then, the viettypingplus.js will hook up to them when it initialized. 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). 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. 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? There is no <table> in the code you showed which is where a <td> belongs.

Thank you very much for your quick answer. I really like your second solution, but don't know how to implement. Do you know any Doc/post/example abour doing this? Again, thank you very much for your help. — H. Pham, Aug 31 '14 at 13:18
@H.Pham - see my new 3rd option above. After studying the code some more, I think you can manually just make a function call to hook up your newly added element. — jfriend00, Aug 31 '14 at 15:42
jfriend00, Thank you very much for your help. The third option works perfectly and does not require a lot of code. — H. Pham, Sep 02 '14 at 13:44

How to apply loaded scripts to dynamically added element?

1 Answers1