Reactivate jquery function after function call

Asked

Viewed 50 times

0

Good afternoon, I have the following code that inserts inputs into a div when it is clicked on a "NEW" button that also takes direct focus to the first field on the line and that can also happen when pressing enter, the problem is, only enter works in the first line, lines that are inserted does not work enter.

$(document).ready(function() {
var scntDiv = $('#more_item');
var rscn = $('#more_item x').size() + 1;
new_input();
input_keydown();

$('#more_item_add').on('click', function() {
    new_input(); });

function input_keydown() {
    $('input').keydown(function(e) {
        if (e.which == 13) {
            new_input(); } }); }

function new_input() {
    $('<x><input class="cod" id="focus' + rscn +'" placeholder="Código" /><input class="desc" placeholder="Descrição" /><input class="quant" placeholder="Quantidade" /><input class="val" placeholder="Valor" /><span id="remove_item" class="remove cursor_pointer display_none">+</span></x>').appendTo(scntDiv);
    $('#focus' + rscn).focus();
    rscn++;
    return false; }

$('#remove_item').live('click', function() {
    if(rscn > 1) {
        $(this).parents('x').remove();
        rscn--; }
    return false; });

$('#print').on('click', function() {
    window.print(); });

$('#reset').on('click', function() {
    location.reload(); }); });

which in this case hinders, because I wanted to press enter until the end, that is, I fill the first line and hit enter, then jump to the second and hit enter to the third and so on, but only works in the first.

<script src='jquery_1.8.3.js'></script>
<div class='inputs'>
    <div id='more_item_add' class='button cursor_pointer display_none'>Novo</div>
    <div id='print' class='button cursor_pointer display_none'>Imprimir</div>
    <div id='reset' class='button cursor_pointer display_none'>Resetar</div>
    <div id='more_item'></div>
</div>

I do not know if it is the best format, I accept suggestions, but I do not like to wait for the answer without testing, so I searched a lot after asking and found a solution that helped exactly as needed, just change the part

function input_keydown() {
$('input').keydown(function(e) {
    if (e.which == 13) {
        new_input(); } }); }

for this part

        $(document).on('keydown', 'input', function(e) {
            if (e.which == 13) {
                new_input(); } });
jquery function form input

  • puts HTML in question for ease.. :)

  • I found on this site http://www.kadunew.com/blog/jquery/attributing-events-createddynamically

  • The way you think it’s gonna work if the focus is on inputs or not... that’s the way it is?

  • @Marllonnasser in the case, when I press enter being in an input, when to press outside the input it does not execute, it has to be focused on any input, it is not specified which input, but this in the case is purposeful because I do not want to choose input

1 answer

0


using this section, I achieved a pleasant result, but still accept suggestions

$(document).on('keydown', 'input', function(e) {
    if (e.which == 13) {
       new_input(); } });

and in input insertion function I switched from append to prepend

function new_input() {
    $('<x>'
        + '<input class="cod" placeholder="Código" />'
        + '<input class="desc" placeholder="Descrição" />'
        + '<input id="teste_de_calculo quantidade" class="quant" placeholder="Quantidade" />'
        + '<input id="teste_de_calculo resultado" class="val" placeholder="Valor" />'
        + '<span class="remove cursor_pointer display_none">+</span>'
    + '</x>').prependTo(scnDiv);
    $('input').first().focus();
    rscnDiv++; } });

Browser other questions tagged jquery function form input

You are not signed in. Login or sign up in order to post.