Polymer动态创建表格行时Amount列on-change事件无法触发如何解决

问题根因 #

• 内联on-change="addTotal"绑定的是全局window.addTotal方法，你的addTotal是当前组件的实例方法，不在全局作用域，因此事件触发时找不到对应函数无法执行。
• 使用addEventListener绑定时querySelector参数错误：类选择器必须加.前缀，你写的querySelector('totalcheck')是匹配<totalcheck>标签，找不到对应元素自然会报undefined。同时如果你在元素插入DOM前执行选择，也会因为元素还未挂载到DOM树导致选择失败。

解决方案 #

方案1：模板创建后提前绑定事件（精准绑定单个元素） #

直接从模板的DocumentFragment中取出输入框元素，插入DOM前绑定事件，避免后续DOM查询，同时修正this指向问题：

addRow() {
    const template = document.createElement('template');
    template.innerHTML = `<div class="tr">
        <div class="td">
            <vaadin-text-field theme="field-description"></vaadin-text-field>
        </div>
        <div class="td">
            <div class="td">        
                <vaadin-text-field theme="field-amount" class="totalcheck"></vaadin-text-field>
            </div>
            <div class="td"></div>
        </div>
    </div>`;
 
    const fragment = template.content;
    // 从模板片段中直接选中金额输入框
    const amountInput = fragment.querySelector('.totalcheck');
    // 绑定事件，用bind保留组件的this指向
    amountInput.addEventListener('change', this.addTotal.bind(this));

    this.$.Table.insertBefore(fragment, this.$.subTotalRow);
}

addTotal(){
    // 累加所有金额列的逻辑示例
    let total = 0;
    document.querySelectorAll('.totalcheck').forEach(input => {
        total += parseFloat(input.value) || 0;
    })
    // 这里写总金额赋值到对应展示区域的逻辑即可
}

方案2：事件委托（更适合频繁新增行的场景） #

只需在组件初始化阶段给外层表格容器绑定一次事件，后续所有动态新增的行都能自动触发逻辑，不需要每次加行重复绑定：

// 组件初始化时执行一次即可
initEvent() {
    this.$.Table.addEventListener('change', (e) => {
        // 判断触发事件的元素是否是金额输入框
        if(e.target.classList.contains('totalcheck')) {
            this.addTotal();
        }
    })
}

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