javascript - 动态生成列表上 'click' 上的 jQuery 返回 'an empty string'

Question

我用这个函数创建了一个输入列表:

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$);
    }
}

我网站上的输出:

        <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>

很好...我有一些输入复选框。

现在，如果我单击一个复选框，我想获得警报或 console.log 输出。

这是我对它的功能(这是我认为的问题):

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

控制台告诉我:(一个空字符串)

我一直在 Google 和 SO 中搜索，但找不到我的问题。

我试试这个(没有成功):

Click event on dynamically generated list items using jquery

供您引用(我认为这很重要)- 我在这里初始化函数:

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();
        }        
    });    
}

Answer 1

使用 val 而不是 text 并且 id 必须是唯一的。您可以使用 this 进行操作，而无需担心 id。

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