javascript - 动态分配按钮 ID 并通过 $.proxy() 传递它

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

在这种情况下，更好的模式是委托(delegate)事件处理程序。这样，您就不需要在每次迭代中附加事件 Hook ，并且可以使用单个处理程序从单击的元素中读取 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() 函数的每次迭代而递增。

<小时/>

更新

what if I need to pass something like .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'));
});