Minha página possui um selectbox, com alguns segmentos, quando um usuário seleciona um segmento, através do evento on change
do jQuery, ele pega o valor do <option>
selecionado e insere um input hidden com o valor deste option dentro de uma div com o append.
tô precisando fazer um loop for dentro dessa determinada div, e pegar o elemento input hidden com uma classe especifica, no entanto, esse input é inserido no DOM depois de evento com append.
se eu faço um loop for, e dou um console.log ele sempre retorna 'undefined'.
preciso pegar esse elemento input em especifico e ver se o usuário inseriu o mesmo input 2x com o mesmo value para só então inserir esse input
gostaria que me demonstrassem uma maneira de pegar esse elemento depois do append.
aqui está um exemplo do código: http://jsfiddle.net/stzfd7t9/2/
HTML:
<label for="segmento">selecione um segmento</label><br>
<select name="" id="segmento">
<option value="industria">industria</option>
<option value="tecnologia">tecnologia</option>
<option value="telecomunicações">telecomunicações</option>
</select>
<div id="result" class="filtro">
</div>
JAVASCRIPT:
/**
* limite de filtros
* padrão: 0;
*/
var filterLimit = 0;
/**
* container das etiquetas e input
*/
var filterContainer = $('#result');
var inputList = $('#result input[class="segment"]');
// quando uma opção for selecionada, adiciona a etiqueta
$('#segmento').on('change', function() {
filterLimit++;
var segValue = $('#segmento option:selected').text();
if( filterLimit < 4 ) {
// insere loop for aqui
for( var i=0; i<= inputList.length; i++ ) {
console.log(inputList)
}
// insere o elemento no DOM
filterContainer.append('<input type="hidden" name="segment[]" value="'+ segValue +'" class="segment">');
// insere a etiqueta
filterContainer.append('<div class="etiqueta">'+ segValue +' <a href="#" id="remove">x</a></div>');
} else {
alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');
}
});