使用jQuery动态绑定表格列时按钮点击事件失效求助

你的按钮点击事件无法触发，核心问题和优化点我整理如下：

主要问题：jQuery加载顺序错误 #

你当前的代码是先写了jQuery逻辑，之后才引入jQuery库文件。这会导致浏览器执行你的JS代码时，$（jQuery的别名）还未被定义，所有事件绑定代码根本不会生效。

修复与优化步骤 #

• 调整加载顺序：把引入jQuery的<script>标签放在自定义JS代码之前，确保浏览器先加载jQuery库，再执行你的逻辑。
• 优化变量作用域：你在#btnASizeR的点击事件里重新声明了var i，这会覆盖外部的i变量，去掉内部的var可以避免混淆。
• 增加边界判断：给删除按钮加行数量判断，防止没有行的时候点击删除出现不必要的错误。

修正后的完整代码 #

HTML与JS部分 #

<tr>
    <td class='text-left'><strong>Wire Dimensions</strong></td>
</tr>
<tr>
    <td class='text-left'><strong>Standard Sizes & Tolerances</strong></td>
    <td>
        <input type="button" id="btnASizeR" value="AddSizeRange" />
        <input type="button" id="btnWdDelete" value="Delete" />
        <table id="WireDimTbl" class="table table-bordered">
            <thead>
                <tr>
                    <th class="text-center">Size Range Min (mm)</th>
                    <th class="text-center">Size Range Max (mm)</th>
                    <th class="text-center">Tolerance (-)mm</th>
                    <th class="text-center">Tolerance (+) mm</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </td>
</tr>

<!-- 先加载jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 再执行自定义JS逻辑 -->
<script>
$(function() { 
    var i = 0; 
    $('#btnASizeR').click(function() { 
        // 去掉内部var，避免覆盖外部变量
        i = $("#WireDimTbl tbody>tr").length + 1; 
        var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' value='2.00' />"; 
        var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' value='3.00' />"; 
        var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' value='1' />"; 
        var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' value='1' />"; 
        var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>"; 
        $("#WireDimTbl tbody").append(markup); 
    }); 

    $('#btnWdDelete').click(function() { 
        var rowCount = $("#WireDimTbl tbody>tr").length;
        // 避免删除空行报错
        if(rowCount > 0) {
            $("#WireDimTbl tbody>tr:last").remove(); 
        }
    }); 
});
</script>

额外提示 #

如果之后你需要给新增的每行单独添加删除按钮，不要直接给动态生成的按钮绑定事件，要使用事件委托，比如：

$("#WireDimTbl tbody").on("click", ".delete-row-btn", function() {
    $(this).closest("tr").remove();
});

这样不管什么时候新增的按钮，点击事件都会正常生效。

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