foco no próximo input utilizando tecla enter

[stei 0]

Boa noite pessoal..

Eu estou com um probleminha aqui, quero que quando pressionar a tecla enter, o foco vá para o próximo input. Até ai tudo bem, com este código abaixo isso é possível:

 $('input:text').bind("keydown", function(e) {
    var n = $("input:text").length;
    if (e.which == 13) 
    { //Enter key
      e.preventDefault();
      var nextIndex = $('input:text').index(this) + 1;
      if(nextIndex < n)
        $('input:text')[nextIndex].focus();
      else
      {
        $('input:text')[nextIndex-1].blur();
      }
    }
  });

Segue html dos inputs. o formulario inicia com dois inputs

<div class="form-group">
  <div class="col-xs-5">
    <input name="campo1[]" type="text" class="form-control" id="b1" placeholder="campo1">
  </div>
  <div class="col-xs-5">
    <input name="campo2[]"type="text" class="form-control" id="b2" placeholder="campo2">
   </div>
</div>

<div class="form-group">
    <div class="col-xs-5">
        <button id="adicionar" class="btn default">Adicionar novos inputs</button>
        <button type="submit" class="btn btn-primary" id="enviarserializados">Enviar</button>
    </div>
</div>

O problema é que se eu adiciono linha inputs dinamicamente, tbm com javascript, este código acima não funciona....simplesmente não reconhece os outros inputs que foram adicionados dinamicamente(desculpe a redundância.)...alguém consegue me ajudar????

[paulojuchem 20]

isso faz perfeito sentido(btw bootstrap ftw)

imagina o seguinte:

vc carregou 5 elementos

o javascript esperou os 5 elementos carregarem e atrelou o keypress aos 5 elementos

vc adicionou mais um elemento

agora vc tem que atrelar o keypress ao elemento novo

 

da forma como esta, no nomento que vc atrela o keypress, ele pega somente os elementos que já existem.

vc pode resolver de 2 formas:

a) atrelar o evento somente ao novo input q vc criou dinamicamente(não sei como vc esta fazendo)

B) depois que vc adicionou o novo input, desatrelar(se é q essa palavra existe) os keypress($(target).unbind('keypress')) e atrelar o keypress novamente(porque nesse momento o elemento já existe la no html, já que tu pega eles com jquery)

 

ta meio enrolada essa explicacao, se vc n entender avisa q eu coloco um exemplo

[stei 0]

$('#adicionar').click(function() {
var rowNum = 4;
var rowNum2 = 5;
rowNum ++;
rowNum2 ++;
var row = '<div class="form-group"><div class="col-xs-5"><input name="campo1[]" type="text" class="form-control" id="b'+rowNum+'" placeholder="campo1"></div><div class="col-xs-5"><input name="campo2[]"type="text" class="form-control" id="b'+rowNum2+'" placeholder="campo2"></div></div>';

$('#itemRows').append(row);
        return false;
});

Gostaria muito de um exemplo, o javascript para adicionar novos campos usei este acima:

 

 

[paulojuchem 20]

 

$('#adicionar').click(function() {
    var rowNum = 4;
    var rowNum2 = 5;
    rowNum ++;
    rowNum2 ++;
    var row = $('<div class="form-group"><div class="col-xs-5"><input name="campo1[]" type="text" class="form-control" id="b'+rowNum+'" placeholder="campo1"></div><div class="col-xs-5"><input name="campo2[]" type="text" class="form-control" id="b'+rowNum2+'" placeholder="campo2"></div></div>');

    $('#itemRows').append(row);
            

    //agora vamos atrelar o keypress somente a este elemento
    $(row.find('input:text')).bind("keydown", function(e) {
    var n = $("input:text").length;
    if (e.which == 13)
    { //Enter key
      e.preventDefault();
      var nextIndex = $('input:text').index(this) + 1;
      if(nextIndex < n)
        $('input:text')[nextIndex].focus();
      else
      {
        $('input:text')[nextIndex-1].blur();
      }
    }
  });

});

talvez ao invéz de row.find vc tenha que usar $(row).find, mas testa como esta agora primeiro

[William Bruno 1501]

Leia sobre delegate events, como vc está com jQuery, use o método on() para fazer o delegate.

[stei 0]

Funcionou que é uma beleza!!!!
só tive que adicionar o return false;

 

E o melhor, com a tua explicação entendi pq não funcionava!!! :yes:
Obrigado!!!