Question

使用每个功能创建多个按钮。我怎样才能给每个按钮一个id？基本上我的需要是能够将按钮ID传递给myFunc。

这是我尝试过的，但没有运气。

var count=0;
$.each(xc, function(i, stNum) {
    count++;
$('<input class="colBtn" type="button">')
    .prop('id', 'p'+count)
    .on('click', $.proxy(myFunc, this.id))
    .appendTo ('#par2');
});

function myFunc(theID){
    alert(theID); //currently undefined
}

Answer 1

在这种情况下使用的更好模式是委托事件处理程序。这样，您不需要在每次迭代中附加事件挂钩，并且可以使用单个处理程序从单击的元素中读取id属性。试试这个：

$.each(xc, function (i, color) {
    $('<input class="colBtn" type="button" />')
        .prop('id', 'p' + i)
        .appendTo('#par2');
});

$('#par2').on('click', '.colBtn', function() {
    alert(this.id);
});

Example fiddle

请注意，count是多余的，因为i随着each()函数的每次迭代而递增。

<强> 更新

如果我需要传递类似.on（'click'，$ .proxy（myFunc，this.id，color [0]））

您可以使用data-*属性将辅助数据添加到元素中，然后可以在单击处理程序中读取该元素：

$.each(xc, function (i, color) {
    $('<input class="colBtn" type="button" />')
        .prop('id', 'p' + i)
        .data('color', color[0])
        .appendTo('#par2');
});

$('#par2').on('click', '.colBtn', function() {
    alert(this.id);
    alert($(this).data('color'));
});

动态分配按钮ID并通过$ .proxy（）传递它

1 个答案: