How do I implement a keyup function with a dynamically create input element with JQuery?

Question

I can not figure out why the following code does not work. JSFIDDLE LINK

$(document).ready(function () {
    addInput();
});

var limit = 30;
function addInput() {
    var numberOfRows = $("#shipping tr").size();
    var id = numberOfRows;
    if (numberOfRows == limit) {
        alert("You have reached the limit of adding " + limit + " inputs");
    } else {
        $('#shipping').append('<tr id="rate' + id + '"></tr>');
        $('tr#rate' + id).append('<td></td>');
        $('tr#rate' + id).append('<td><input type="text" name="rate" /></td>');
    }
    $('input[name=rate]').on('keyup', 'input', function () {
        alert('YAY');
        return false;
    });
}

I am trying to assign a keyup function to the inputs that I add dynamically.

Expected output: YAY! inside a popup box

Please help!

see the demo in answer..

Dipesh Parmar
– Dipesh Parmar

2013-04-19 03:40:12 +00:00
Commented Apr 19, 2013 at 3:40 — Dipesh Parmar
– Dipesh Parmar, Commented Apr 19, 2013 at 3:40

msapkal · Accepted Answer · 2013-04-19 03:41:08Z

7

Attach an keyup event handler to shipping table, and the event will bubble up from the input[name="rate"] to shipping table:

$('#shipping').on('keyup', 'input[name="rate"]', function () {
    alert('YAY');
    return false;
});

DEMO

answered Apr 19, 2013 at 3:41

msapkal

8,3462 gold badges34 silver badges48 bronze badges

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

Comments

Dipesh Parmar · Accepted Answer · 2013-04-19 03:36:42Z

3

You need to add delegation to document because its added to the document.

Example

$(document).on('keyup', 'input[name="rate"]', function () {
    alert('YAY ');
});

`Working Demo`

answered Apr 19, 2013 at 3:36

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

1 Comment

Ian Over a year ago

It doesn't make sense to go up all the way to document when the input[name="rate"] elements are added to the [id="shipping"] element

Collectives™ on Stack Overflow

How do I implement a keyup function with a dynamically create input element with JQuery?

2 Answers 2

Comments

`Working Demo`

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related