Question

我一直在浏览我动态添加的代码并更改使用.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（）不会触发。现在我不确定问题是存在于整个代码还是整个代码，但是当我单击Add按钮时它不会在默认显示的那个之后添加另一个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;}
});

Answer 1

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

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

var whatmeatfield

你也直接传递一些元素id的html，你需要parse到integer。像

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

这可以帮助您解决问题

Answer 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 _

如果它有帮助，请寄回给我。

动态添加按钮，jquery无法正常工作

2 个答案: