使用jQuery开发计算器：动态按钮无法取值与显示的问题

我太懂你这个困扰了——静态写的按钮一切正常，改成动态生成后就没法把按钮值传到显示区，这在jQuery开发里是个非常典型的事件绑定问题！

问题根源 #

页面加载完成后，你用$('.calc-btn').click()这类方式绑定事件时，只会给当时已经存在于DOM中的元素挂上事件。而动态生成的按钮是在页面加载之后才创建的，所以它们根本没被绑定到点击事件上，自然触发不了取值逻辑。

解决方案：事件委托（Event Delegation） #

jQuery的.on()方法支持事件委托，把事件绑定到一个页面加载时就存在的父元素上，当点击事件冒泡到父元素时，再判断触发事件的是不是目标按钮，这样不管按钮是静态还是动态生成的，都能触发事件。

示例代码

假设你的计算器按钮容器是#calc-buttons，显示区域是#display，可以这么写：

// 用事件委托绑定点击事件到父容器
$('#calc-buttons').on('click', '.calc-btn', function() {
    // 获取按钮的值（根据你的按钮结构，可能用$(this).text()，看你是用value属性还是文本存值）
    var buttonValue = $(this).val();
    // 将值追加到显示区域
    $('#display').append(buttonValue);
});

动态生成按钮的示例（供参考）

确保你生成按钮时正确设置了value或文本内容：

// 动态生成数字按钮
var digits = ['0','1','2','3','4','5','6','7','8','9','+','-','*','/','='];
var buttonContainer = $('#calc-buttons');

digits.forEach(function(digit) {
    var newButton = $('<button>', {
        class: 'calc-btn',
        value: digit,
        text: digit
    });
    buttonContainer.append(newButton);
});

额外检查点 #

• 确认父容器选择器是正确的，必须是页面加载时就存在的元素（别选动态生成的容器哦）
• 检查按钮的取值方式：如果你的按钮是用文本显示内容而不是value属性，就把$(this).val()改成$(this).text()
• 确保没有重复绑定事件，比如之前的静态绑定代码没删除，不过事件委托一般不会有冲突问题

你按照这个思路调整代码，应该就能解决动态按钮无法取值的问题啦！

内容的提问来源于stack exchange，提问作者Piotr