动态添加按钮，jquery 不工作答案

【问题标题】：Dynamically Added button, jquery not working动态添加按钮，jquery 不工作
【发布时间】：2015-07-22 19:57:55
【问题描述】：

我一直在检查我动态添加的代码并将所有使用 .click() 的内容更改为使用 .on("click") 并且效果很好，但现在我遇到了一些我不确定的事情如何转换为动态添加的兼容。

代码如下：这是javascript中的一个函数，当单击名为“添加”或“删除”的按钮时调用（这些按钮也会在单击另一个按钮后动态添加）

    function row_add_remove(sname, snum, count, type) {
    if (type == "add") {
        var selectbox = '<select id="qty_'+snum+'_'+count+'" name="qty_'+snum+'_'+count+'">';
        for (i=1;i<16;i++){selectbox += '<option value='+i+'>'+i+'</option>';}
        selectbox += '</select>';
        if (count > 1) {
            $("#tr_"+sname+"_"+(count-1)).after('<tr id="tr_'+sname+'_'+count+'"><td>'+selectbox+'&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;<input type=text id="item_'+sname+'_'+count+'" name="item_'+snum+'_'+count+'" size="70" placeholder="Item '+count+'" /></td></tr>');
            $("#toprow"+snum+"_count").html("("+count+")");
        }
    }
    if (type == "remove") {
        if (count == 1) {
            $("#"+sname).hide();
            $("#toprow"+snum+"_count").html("");
            $("#td_"+sname+"_"+count).remove();
            $("#ph_order_div").show();
            count--;
        }
        if (count > 1) {
            $("#tr_"+sname+"_"+count).remove();
            count--;
            $("#toprow"+snum+"_count").html("("+count+")");
        }
        if (count < 0) {count = 0;}
    }
}

问题（我认为，可能不止于此）是 .after() 没有触发。现在我不确定问题出在这个问题上还是整个代码上，但是当我单击“添加”按钮时，它不会在默认显示的 TR 之后添加另一个 TR。

此代码在未动态添加时效果很好，因此当调用它的按钮和它尝试修改的 TR 被动态添加时，任何人都可以帮助我进行更改以使上述函数正常工作吗？

这是点击按钮时触发的代码：

    whatmeatfield = $("#meat_field_count").html();      
$(document).on("click", "#add_btn_1", function() {
    if (whatmeatfield <= 0) {whatmeatfield = 1;}
    whatmeatfield++;
    row_add_remove("meatseafood",1,whatmeatfield,"add");
});
$(document).on("click", "#remove_btn_1", function() {
    row_add_remove("meatseafood",1,whatmeatfield,"remove");
    whatmeatfield--;
    if (whatmeatfield <=0) {whatmeatfield = 1;}
});

【问题讨论】：

这听起来像是一个委托问题。语法见api.jquery.com/on
Event binding on dynamically created elements?的可能重复

标签： javascript jquery

【解决方案1】：

在您的.after() 中，<input type=text 中有拼写错误，应该有 <input type="text" 之类的引用

您尚未定义whatmeatfield 变量。应该是

var whatmeatfield

另外你是直接传递一些元素id的html，你需要parse它到integer。喜欢

var whatmeatfield = parseInt($("#meat_field_count").html()) ;

这可能会帮助您解决问题

【讨论】：

我将此标记为答案，因为它最接近实际问题。问题是，我的变量“whatmeatfield”是在页面首次加载时在 JS 中定义的，而不是在单击按钮期间。因此，由于字段是动态添加的，因此当页面首次加载时，“meat_field_count”ID 不存在，因此没有设置，因此在单击按钮时代码无法识别并作为“未定义”发送

【解决方案2】：

问题可能由于两件事而发生。

您正在使用 id 选择器，并且您很可能会添加另一个具有相同 id 的按钮，并且 html 规范说 id 应该是唯一的。

你能做什么？将 ID 更改为 CLASS。

出现问题是因为您将 id 更改为 #remove_btn_1、#remove_btn_2、#remove_btn_3 等架构，因此您没有此按钮的任何处理程序。

你能做什么？将选择器从“#remove_btn_1”更改为“[id*=remove_btn_]”

当然和#add_btn_一样

如果有帮助，请回复我。

【讨论】：