按钮onclick显示id和值未定义

Button onclick shows id and value undefined

本文关键字：未定义 id onclick 显示 按钮      更新时间：2023-09-26

我动态地将按钮添加到我的页面，然后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"));
}

我是这样做的:

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"));
});

这里是JSFiddle演示

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

将onclick="btnpanel()"中的this传递为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节点方法都支持。

相关文章：