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
– user2979046, Commented Dec 19, 2013 at 9: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
– A. Wolff, Commented Dec 19, 2013 at 9: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
– CJ Ramki, Commented Dec 19, 2013 at 10:02

Community · Accepted Answer · 2017-05-23 12:19:09Z

2

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

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Dec 19, 2013 at 9:45

patel.milanb

6,01215 gold badges62 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2979046 Over a year ago

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.

Sridhar R · Accepted Answer · 2013-12-19 09:45:15Z

1

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

answered Dec 19, 2013 at 9:45

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-12-19 09:46:12Z

1

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, '');
    }
});

answered Dec 19, 2013 at 9:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

DrLivingston · Accepted Answer · 2013-12-19 09:49:33Z

-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, 2013 at 9:49

DrLivingston

8187 silver badges15 bronze badges

3 Comments

patel.milanb Over a year ago

.live is depreciated and .on is introduced

user2979046 Over a year ago

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

DrLivingston Over a year ago

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.

Collectives™ on Stack Overflow

keyup function for dynamically added input fields

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related