get element after being inserted into the DOM with jQuery Append

Navigation
5

My page has a selectbox, with some segments, when a user selects a segment, through the on change event of jQuery, it takes the value of the selected <option> and inserts an input hidden with the value of this option within a div with append.

I need to do a for loop within that particular div, and get the input element hidden with a specific class, however, this input is inserted into the DOM after event with append.

If I make a for loop, and I give a console.log it always returns 'undefined'.

I need to get this input element in specific and see if the user entered the same input 2x with the same value to only then insert this input

I would like you to show me a way to get this element after append.

Here is an example of the code: link

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');

    }
});
    
asked by anonymous 15.05.2015 / 21:18

3 answers

4

Note that I used the each function of jQuery. It's like a ForEach of PHP.

I get each value that is in the hidden fields and compare it with the value being selected in the ComboBox. If you have not add.

  

15.05.2015 / 21:38
2

If you want to avoid adding a value twice you need to check the inputs you already have, and do not add a new case if the value already exists in another input.

This check is done within the function that is on change and you can simply search for an input with that value directly: 

var jaExiste = filterContainer[0].querySelector('input[value="'+segValue+'"]');
if(jaExiste) return;

Notice that I used [0] since filterContainer is a jQuery object and thus extracts the DOM element.

Example: link

    
18.05.2015 / 21:49
1

You can not really understand what you want, but I think you want to prevent the user from adding 2 equal values, right?

If so, just create a array to save the already entered values and check before adding the values: 

var filterLimit = 0,
    filterContainer = $('#result'),
    inputList = $('#result input');

var selected = new Array();

$('#segmento').on('change', function() {
    var segValue = $('#segmento option:selected').text();

    for ( var count = 0; count < selected.length; count++ ) {
        if (selected[count] == segValue) {
            alert('Você não pode adicionar 2 valores iguais');

            return false;
        }
    }

    if ( filterLimit < 3 ) {
        filterContainer.append('<input type="hidden" name="segment[]" value="' + segValue + '" class="segment">');
        filterContainer.append('<div class="etiqueta">' + segValue + ' <a href="#" id="remove">x</a></div>');

        selected.push(segValue);
        filterLimit++;
    } else {
        alert('você só pode selecionar 3 filtros para segmento, remove um ou mais filtros e tente novamente');
    }
});
    
15.05.2015 / 21:42
What exactly is the element.class selector? JavaScript: how to count the characters of an html text?