Question

我正在动态创建几个按钮。我试图在不同的类或id上分配每个，所以当它被点击它将有不同的输出。如何在每个类或id名称的末尾添加一个值，以便为每个按钮指定一个唯一的类或ID名称？这是我的代码

socket.on('usernames', function(data){
    var $contentWrap = $("#contentWrap").empty();
    for(i=0; i <data.length; i++){
        $input = $('<input type="button" style="width:200px" class= "button"/></br>');
        $input.val(data[i]);
        $input.appendTo($("#contentWrap"));
    }
});

我可以为我创建的所有按钮创建一个on click事件。到目前为止，我创建了一个单击偶数，但它只适用于第一个按钮。这是我的代码

$(document.body).on('click','.button', function(e) { 
    console.log($('.button').val());
});

Answer 1

使用$(this).val()代替$('.button').val()。 this会引用点击按钮。

$(document.body).on('click','.button', function(e) { 
    console.log($(this).val());
});

Answer 2

socket.on('usernames', function(data){
    var $contentWrap = $("#contentWrap").empty();
    for(i=0; i <data.length; i++){
        $input = $('<input type="button" id="btn"'+i+' style="width:200px" class= "button"/></br>');
        $input.val(data[i]);
        $input.appendTo($("#contentWrap"));
    }
});

Answer 3

问题：使用此部分代码console.log($('.button').val());部分$('.button')选择所有按钮，但当您说.val()时，默认为第一个按钮出了集合。因此，您在所有按钮点击时都会看到相同的输出。

解决方案：更改代码，使用$(this).val()记录当前点击的按钮值。 this将引用触发事件的元素。

所以最后一行代码应该是

console.log($(this).val());

将类或id分配给使用jquery动态创建的按钮

3 个答案: