append new rows and input tags using jQuery

Question

I have a web application that has set to navigate its input fields using Enter key too. In addition, I have a control in my forms that appends new rows to a table that contains my input fields.

<select name="more" id="more" style="width:50px">
   <option value="0">0</option>
   <option value="5">5</option>
   <option value="10">10</option>
   <option value="20">20</option>
</select>

And this what I used for appending new rows containing input fields.

$('#more').change(function(e) {
    var current_rows = ($('#myTable tr').length)-1;
    current_rows = parseInt(current_rows);
    var more = $('#more').val();
    more = parseInt(more);
    if (more != '0') {
        for (i = current_rows+1 ; i <= current_rows+more ; i++) {
           // rows HTML tags here as content
           $('#myTable tr:last').after(content);
        }
    }
    $('#more').val('0');
});

Imagine that I have 5 rows at the first time. Whenever I press Enter, the cursor changes its position from the current field to the next one. But when I append new rows and their input fields, anything will not happen from the 6th row. Even, it can not fetch the key code for the Enter using my previous code.

if (event.keyCode == 13) {
// do something
}

What is the matter ?

Could you post more of the code, please?

Aaron
– Aaron

2011-12-17 06:44:03 +00:00
Commented Dec 17, 2011 at 6:44 — Aaron
– Aaron, Commented Dec 17, 2011 at 6:44

mrtsherman · Accepted Answer · 2011-12-17 07:15:56Z

2

If you are in jQuery 1.7+ then use on or delegate instead. It is more efficient than old methods. Here I monitor the table for click events on table cells. When an event occurs I add clicked! to the table cell. This works for both the initial table cells and added ones.

http://jsfiddle.net/WBxQz/1/

$('#more').change(function(e) {
    for (var i = 0; i < $(this).val(); i++) {
        $('#myTable').append('<tr><td></td></tr>');
    }
});

$('table').on('click', 'td', function() {
    $(this).html('clicked!');
});

answered Dec 17, 2011 at 7:15

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

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

Comments

Ali Foroughi · Accepted Answer · 2011-12-17 07:02:39Z

0

I think it is because you load other rows dynamically into you DOM .Maybe the "Live" method of Jquery can help you

$("#myTable tr").live("keypress",function (e){

if(e.keyCode == 13)
    //Do somthing

});

if this solution did not work , comment me to edit it

Good luck, Ali

answered Dec 17, 2011 at 7:02

Ali Foroughi

4,6097 gold badges45 silver badges67 bronze badges

5 Comments

mrtsherman Over a year ago

As of jQuery 1.7 live is deprecated. It is also not recommended for jQuery 1.4.2 or later. You should use delegate instead.

Mohammad Saberi Over a year ago

I'm sure the reason is what you said. But your code did not work to solve it.

Ali Foroughi Over a year ago

did you use the delegate instead of live method ?

Mohammad Saberi Over a year ago

Thank you Ali and mrtsherman. Your answers helped me to solve it. Finally I can do what I needed using the code below: $("#myTable").delegate("input","keypress",function(e) { // do something });

Ali Foroughi Over a year ago

according to mrtsherman saying , live is deprecated COOL! happy for help :)

Mohammad Saberi · Accepted Answer · 2011-12-17 18:05:38Z

0

Finally I could solve my problem using Ali's and mrtsherman's suggestions.

$("#myTable").delegate("input","keypress",function(e) {
    // do something
})

Thank you Ali and Mrtsherman.

answered Dec 17, 2011 at 18:05

Mohammad Saberi

13.2k28 gold badges81 silver badges132 bronze badges

Collectives™ on Stack Overflow

append new rows and input tags using jQuery

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related