按钮onclick显示未定义的ID和值

问题描述

我正在向页面动态添加按钮，然后在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"));
}

如果您希望没有jQuery解决方案，并希望使用onclick处理程序，

通过this在onclick="btnpanel()"为onclick="btnpanel(this)"

您的btnpanel函数如下所示：

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

将事件委托给容器元素并摆脱onclick属性：

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

附带说明一下，ID不应以数字开头，即使HTML5规范也允许它使用，但仍不受所有浏览器或CSS上的DOM节点方法支持。