Question

我正在动态地向我的网页添加按钮，然后onclick我希望得到id或value，但它会显示undefined。这是我的代码：

for(i=1; i<=jj; i++){
  $("#buttonPanel").append('<input type="button" class="btn btn-default" style="margin-top:20px; width: 40px;" id="'+i+'" value="'+i+'" onclick="btnpanel()"/>'+'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp');
}

这是事件监听器的jQuery代码：

function btnpanel(){
  alert($(this).attr("id"));
  alert($(this).attr("value"));
}

Answer 1

这是我做的：

for (i = 1; i <= jj; i++) {
    $("#buttonPanel").append('<input type="button" class="btn btn-default" style="margin-top:20px; width: 40px;" id="' + i + '" value="' + i + '" />' + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp');
}

$("#buttonPanel").on("click", ".btn", function () {
    alert($(this).attr("id"));
    alert($(this).attr("value"));
});

Here is the JSFiddle demo

Answer 2

如果你想要一个没有jQuery解决方案并希望使用onclick处理程序，

将this中的onclick="btnpanel()"作为onclick="btnpanel(this)"传递。

你的btnpanel功能看起来像，

function btnpanel(obj){
    alert(obj.id);
    alert(obj.value);
}

Answer 3

将事件委托给容器元素并删除onclick属性：

$(function(){
    $("#buttonPanel").on('click', '.btn', function(){
        alert(this.id);
        alert(this.value);
    });
});

作为旁注，ID不应该以数字开头，即使HTML5规范允许，但所有浏览器或CSS上的DOM节点方法仍然不支持。

按钮onclick显示id和值undefined

3 个答案: