Question

I’m using autocomplete plugin in jQuery and I’ve created a method which appens elements selected in autocomplete result.

$("#buscar").autocomplete({
source: "procesos/buscarPersona.php",
minLength: 2,
select: function(event, ui ){
    var name = ui.item.value;
    var id = ui.item.id_persona;
    $("#acreditados tbody").append('<tr id='+id+'><td>'+name+'<td><td>Monto: $<input name="monto_'+id+'" type="text" /><img id="delete_'+id+'" src="img/ico-delete.gif" /></td></tr>');
}
});

As you can see my code appends input elements to my page. Then in other method I want to do operations with values in previously added inputs.

$("#tablaAm").click(function(){
    var montoTotal = 0;
    $("input[name^='monto_']").each(function(index){
        alert(index + ': ' + $(this).val());
    });
    });

The problem is that .each() isn’t working for this new elements. I tried .each() for inputs that exists when the page is loaded and I have no problem with it, the problem are elements appended after load.

How can I make this work? I tried live() method but I think .each is not an event.

Answer 1

You are setting the name attribute and not id.

It should be:

$('input[name^="monto_"]')