html - JQuery - Autocomplete and dynamic inputs -

my page creates multiple rows 3 text inputs in each. functions add , remove fields works correctly.

i need after user typing in code, search database , change value of field name.

the problem works on first line, , not work each field created. customer can add many lines want, after sending php file create csv file information.

html

<div id="campos">     <table border="0" cellpadding="2" cellspacing="4">         <tr>             <td>                 excluir             </td>             <td align="center">                 codigo no bag:             </td>             <td>                 nome comum:             </td>             <td>                 quantidade de registros:             </td>         </tr>         <tr class="linhas">             <td>                 <a href="#" class="removercampo" title="remover linha"><img src="../imagens/w_close.gif" width="11" height="11"></a>             </td>             <td>                 <input name="index_linha[]" type="hidden" value="1"> <input type="text" name="cod[]" id="cod" onblur="busca_nome_acesso(this.value)">             </td>             <td>                 <input type="text" name="nome_acesso[]">             </td>             <td>                 <input name="qtd[]" type="text" size="5" maxlength="5">             </td>             <td></td>         </tr>         <tr>             <td colspan="5" align="right">                 <label><a href="#" class="adicionarcampo" title="adicionar item"><img src="../imagens/iconemaisquadrado.gif">adicionar campo</a></label>             </td>         </tr>         <tr>             <td align="center" colspan="4">                 <span>&nbsp;</span> <input type="submit" id="btn-cadastrar" value="cadastrar">             </td>         </tr>     </table> </div>  </div></form>  </div> 

script jquery

$(function () {     function removecampo() {         $(".removercampo").unbind("click");         $(".removercampo").bind("click", function () {             if ($("tr.linhas").length > 1) {                 $(this).parent().parent().remove();             }         });     }       $(".adicionarcampo").click(function () {         var num_linhas = $("tr.linhas").length;         if ($("tr.linhas").length < 10) {             novocampo = $("tr.linhas:first").clone();             novocampo.find("input").val("");             novocampo.insertafter("tr.linhas:last");             novocampo.find('input:text:first').focus();             novocampo.find('input:hidden:first').val(num_linhas);             removecampo();         }     });      //function search database     function busca_nome_acesso(valor) {          $.getjson('busca_nome.php?search=', {             valor: valor,             ajax: 'true'         }, function (j) {             var resp = '';             (var = 0; < j.length; i++)             resp += j[i].nome_comum_1;             //return answer here dont know how         });     } 

i tried using delegate,live , on methods.

$("#tr.linhas").delegate("blur", $("#cod")function () {      $.getjson('busca_nome.php?search=', {         valor: $(this).val(),         ajax: 'true'     }, function (j) {         var resp = '';         (var = 0; < j.length; i++)         resp += j[i].nome_comum_1;         //just test, not know how return correct location         alert(resp);     }); }) 

i'm not sure you've tried i've got working fiddle here: http://jsfiddle.net/9ulgr/ can check out. did change id="cod" on input class="cod" because cannot duplicate ids in document, cause unexpected problems. after used jquery's on event register event on non-dynamic parent (#campos) , delegated dynamic input (input.cod) , works when focus other input fires alert text of box.

i removed onblur attribute tag. i'm not sure if causing problems if you're going use jquery (or javascript) register events, don't in html.

here event handler wrote:

$("#campos").on("blur", "input.cod", function() {   alert("make request " + $(this).val());  });