Id input duplicado
Fala moçada, precisando de uma ajuda por aqui, vou tentar explicar o que tenho e o que não estou conseguindo vamos la:
eu tenho uma tabela onde o usuario vai informar o procedimento de uma lista autocomplete e automaticamente o jquery preenche o preço isso vindo do banco mysql/php está tudo funcionando normal com uma exceção o preço não está linkando ao procedimento quando duplicado o campo ele teima em apresentar o preço apenas no input master vou expor o codigo
HTML
<table>
<tbody id="duplica">
<tr>
<td><input type="text" name="procedimento[]" id="procedimento"/></td>
<td><input type="text" name="procedimento_preco[]" id="procedimento_preco"/></td>
</tr>
</tbody>
</table>
<button id="btnAdd" onclick="addRow('dataTable')" class="btn btn-success btn-sm btn-bordered" type="button"><i class="glyphicon glyphicon-plus-sign"></i> Add Item</button>//botao que aciona a clonagem da tr acima
<!--JS-->
<script src="[https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">](https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js)
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script language="javascript">
var data = [
{value: "50", label: "Corte"},
{value: "75", label: "Tintura"},
{value: "25", label: "Hidratação"},
{value: "30", label: "Barba"}
]; //Estes dados sao apenas para teste, posteriormente irei puxar do banco
$(document).ready(function () {
//Adiciona <TR>
$("#btnAdd").click(function () {
var newRow = $(
"<tr>\n\
<td><input type='text' name='procedimento[]' id='procedimento'/></td>\n\
<td><input type='text' name='procedimento_preco[]' id='procedimento_preco'/></td>\n\
</tr>");
//Autocomplete da <TR> (duplicada)
//aqui ele lista os dados acima em cada input isto está ok inclusive ele lista para inputs duplicados
$("#duplica").append(newRow);
newRow.find('#procedimento').autocomplete({
source: data,
focus: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox
$(this).val(ui.item.label);
},
/* Aqui é onde está o problema, pela logica ele irá pegar o valor e exibir no input valor ele até está fazendo isso porém no campo duplicado ele reescreve o valor no primeiro campo sempre*/
select: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
// manually update the textbox and hidden field
$(this).val(ui.item.label);
$("#procedimento_preco").val(ui.item.value);
}
});
});
});
</script>Discussão (1)
Carregando comentários...