keyup function for dynamically added input fields

Question

I trying to implement keyup function for dynamically added input fields, but it is not working

html code

<table  border="1" id="table">
<colgroup>
<col width="100"/>
<col width="100"/>
</colgroup>
<tr>
<td style="text-align:center;">Activity</td>
<td style="text-align:center;">Time</td>
</tr>
<tr>
<td style="text-align:center;">
<select id="activity[]">
<option value="Working">Working</option>
<option value="Leave">Leave</option>
</select>
</td>
<td style="text-align:center;"><input style="width:35px;" type="text" class="text" maxlength="3" id="day1[]"/></td>
</tr>
</table>
<br><br>
<input type="button" value="+" id="plus" />

jquery code

$("#plus").click(function(e){

$("#table").append("<tr><td style='text-align:center;'><select id='activity[]'><option value='Working'>Working</option><option value='Leave'>Leave</option></select></td><td style='text-align:center;'><input style='width:35px;' type='text' class='text' maxlength='3' name='day1' id='day1[]'/></td></tr>");
e.preventDefault();


});
$.each($('[id^=day1]'), function (i, item) {
         $("[id*='day1']").keyup(function () {
         if (this.value.match(/[^a-zA-Z.]/g)) {
            this.value = this.value.replace(/[^a-zA-Z.]/g, '');

        }
        });

        });

see demo here

i tried the soln here also it was also not working.

i tried those thing it was also not working, i asked example to check what i tried was correct or not — user2979046, Dec 19 '13 at 09:52
So next time post your failed attempt, not just ask for code. I didn't downvoted or vote to close because i guess you didn't know that but: "Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. " — A. Wolff, Dec 19 '13 at 09:54
@user2979046 how can u assign id as array in html? is it possible to use id like this 'id="activity[ ]' in html? — CJ Ramki, Dec 19 '13 at 10:02
i agree with your point, and the main reason i didn't post all attempts it was showing question was with more code content.May be will look to format question better next time and thanks for your advice — user2979046, Dec 19 '13 at 10:04
@CJRamki yes it is possible, it is done because i add dynamic fields to form — user2979046, Dec 19 '13 at 10:08

score 1 · Answer 1 · edited May 23 '17 at 12:19

for dynamic controls you need to bind events on document level like this:

$(document).on("keyup","[id*='day1']",function() { 
    // code goes here...
});

or you can use body as well.

 $('body').on("keyup","[id*='day1']",function() { 
        // code goes here...
 });

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). Thus in the following example, #dataTable tbody tr must exist before the code is generated.

If new HTML is being injected into the page, it is prefferable to use delegated events to attach an event handler, as described next.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. For example, if the table exists, but the rows are added dynamically using code, the following will handle it:

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, the first code example attaches a handler to 1,000 elements. A delegated-events approach (the second code example) attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody).

courtesy: StakcOverFlow Link

Thanks for your good explanation,you could add one more point to this explanation about the version from which `.on()` is supported.It is supported from **jquery1.7**. — user2979046, Dec 19 '13 at 10:19

score 0 · Accepted Answer · answered Dec 19 '13 at 09:45

Try this

$.each($('[id^=day1]'), function (i, item) {
                 $(document).on('keyup', '[id*="day1"]',function () {
                 if (this.value.match(/[^a-zA-Z.]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z.]/g, '');

                }
                });

DEMO

score 0 · Answer 3 · answered Dec 19 '13 at 09:46

use event delegation, also ID of an element must be unique.. so remove the id from the input field

$(document).on('keyup', 'input[name="day1"]'function () {
    if (this.value.match(/[^a-zA-Z.]/g)) {
        this.value = this.value.replace(/[^a-zA-Z.]/g, '');
    }
});

score -1 · Answer 4 · answered Dec 19 '13 at 09:49

-1

You need to add the handler inside the plus click call.

Your other code only gets run once.

Or look at live: http://api.jquery.com/live/

answered Dec 19 '13 at 09:49

DrLivingston

788
6
15

.live is depreciated and .on is introduced – patel.milanb Dec 19 '13 at 09:51
please be specific from which version it is deprecated. As of `jQuery 1.7` only the `.live()` method is deprecated. So for older version of jQuery you can still use `.live()` – user2979046 Dec 19 '13 at 10:37
sorry, I never use either - I always knew it as "live". The real answer is to add the handler to the dom element when it's added, which I recommended first. – DrLivingston Dec 19 '13 at 21:47

keyup function for dynamically added input fields

4 Answers4