How to use jQuery on generated content

Asked May 08 '17 at 19:39

Active May 08 '17 at 19:58

Viewed 18 times

I use jQuery to create HTML elements (specifically, to add a row to a table), but I want to use the generated elements in jQuery. What I came up myself is this:

function add_row() {
    var id = Math.floor(Math.random() * 100000);

    $("#properties").append('<tr>'+
        '<td><input id="'+id+'" type="text" name="myInput"></td>'+
    "</tr>");

    $("#"+id).bind('keydown', hotkey.toLowerCase(), function() {
        do_stuff();
    });
}

Note that I use https://github.com/jeresig/jquery.hotkeys to bind to the input. It doesn't seem to support the on way.

But this feels a little clunky. Is there a better way?

edited May 08 '17 at 19:58

asked May 08 '17 at 19:39

Bart Friederichs

32,037
14
96
185

add a class on the input & then use the http://api.jquery.com/on/ – Agam Banga May 08 '17 at 19:40
@AgamBanga wouldn't that bind the `on` multiple times if I call this function more than once? – Bart Friederichs May 08 '17 at 19:41
use the code outside the method. – Agam Banga May 08 '17 at 19:42
@AgamBanga I can't use it before, because it doesn't exist yet. I have to run the bind on each addition, because the rows are added on a button click. – Bart Friederichs May 08 '17 at 19:43
Yes thats the beauty of `on` method, it works for dynamic elements as well. You don't need to bind everytime – Agam Banga May 08 '17 at 19:44
For dynamic elements use $(document).on('click', '#id' function() {}) – David Aguirre May 08 '17 at 20:09

How to use jQuery on generated content

0 Answers0