jQuery on 'click' on a dynamic generated list returns 'an empty string'

Question

I create a input list with this function:

function buildHTMLinputfields(data, form_id){
    var row$ = '';
    for(var i = 0; i < data.length; i++){        
        row$ = " <label for='check1'>" + data[i].Attribute_Name + "<input data-guid='" + data[i].GUID + "' type='checkbox' name='" + data[i].Name + "' value='" + data[i].Name + "' id='check1' checked='checked'> " + data[i].Name + " </label><br>";

        $(form_id).append(row$);
    }
}

Output on my website:

        <label for="check1">
        Adressierung
        <input type="checkbox" checked="checked" id="check1" value="volladressierbar" name="volladressierbar" data-guid="17caabea-c313-48c9-b965-739ef8d09a1f"> volladressierbar
        </label><br>
        
        <label for="check1">
        Adressierung
        <input type="checkbox" checked="checked" id="check1" value="teiladressierbar" name="teiladressierbar" data-guid="d4419b55-3bb1-4efd-8f1c-f2ae3ed46988"> teiladressierbar
        </label><br>
        
        <label for="check1">
        Empfänger
        <input type="checkbox" checked="checked" id="check1" value="privat" name="privat" data-guid="c14733e5-64f1-4141-a366-a9fd5dfa0aff"> privat
        </label><br>
        
        <label for="check1">Empfänger<input type="checkbox" checked="checked" id="check1" value="Gewerbe" name="Gewerbe" data-guid="6febb58c-8c1d-4f84-a647-5409107c2002"> Gewerbe
        </label><br>

So good... I've some input checkboxen.

Now I want to get a alert or console.log output if I click on one checkbox.

This is my function for it (Here is the problem I think):

function test(){
    $('body').on('click', 'input', function(){
        var text = '';
        text = $('#check1').text(); // empty???
        console.log(text); // Output -> (an empty string)
    });
}

The console says me: (an empty string)

I search a whole time in Google and SO but I can't find my issue.

I try this (without success):

Click event on dynamically generated list items using jquery

For your information (I think it is important) - I initialize the functions here:

function ip_get_order_filters(){
    var cookie_value_bearer = getCookie('ip_token');

    var setHeader = function (xhr) {
        xhr.setRequestHeader('Authorization', "Bearer " + cookie_value_bearer);
    };    

    $.ajax({
        crossdomain: true,
        url: 'https://testapi.***.de/***',
        type: 'GET',
        contentType: 'application/x-www-form-urlencoded',
        beforeSend: setHeader,
        dataType: 'json',
        success: function (data) { 
            buildHTMLinputfields(data, '#filterform'); //generate the input list
            test();
        }        
    });    
}

You're having multiple elements with id="check1" in your HTML. id attribute is meant to be unique. — haim770
– haim770, Commented Jan 7, 2016 at 13:05

Ibrahim Khan · Accepted Answer · 2016-01-07 13:06:25Z

3

Use val instead of text and id must be unique. You can do it like following without concern of id using this.

 $('body').on('click', 'input', function(){
    var text = '';
    text = $(this).val(); 
    console.log(text); 
});

answered Jan 7, 2016 at 13:06

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery on 'click' on a dynamic generated list returns 'an empty string'

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related