Question

我使用jQuery append动态创建带有删除按钮的文本框，每周工作7天。我使用相同的功能7附加按钮，它的工作正常，但我需要生成不同名称的文本框。我的意思是如果我点击星期日添加按钮文本框名称或ID应该是星期日text1星期日text2，和其他工作日相同，它怎么办请帮助我

$(document).ready(function() {
var wrapper         = $(".input_fields_wrap");
var add_button      = $(".add_field_button");
var i = 1; 
$(add_button).click(function(e){ 
    e.preventDefault();
    i++;
        $(this).parent().append('<div><label class="titlesmall-font">From time</label><input type="text" class="form-control"/><label class="titlesmall-font"> To Time</label><input type="text" class="form-control" /><label class="titlesmall-font">Price</label><input type="text" class="form-control" /><input type="button" class="btn btn-danger remove_field padding-top-5 delete"  style="margin-top:5px; margin-left:4%;" value="Delete"></div><div class="clearfix"></div>'); 
});

$(wrapper).on("click",".remove_field", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); i--;
})

}）;

Answer 1

观察以下更改

var $wrapper         = $(".input_fields_wrap");
var $add_button      = $(".add_field_button");

$add_button.click(function(e){ 
    e.preventDefault();
    i++;
    $(this).parent().append('<div><label class="titlesmall-font">From time</label><input type="text" class="form-control"/><label class="titlesmall-font"> To Time</label><input type="text" class="form-control" /><label class="titlesmall-font">Price</label><input type="text" class="form-control" /><input type="button" class="btn btn-danger remove_field padding-top-5 delete"  style="margin-top:5px; margin-left:4%;" value="Delete"></div><div class="clearfix"></div>'); 
});

$wrapper.on("click",".remove_field", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); i--;
});

如，

$wrapper和$add_button已经是jQuery Object，所以不需要在$内再次包装

如何为动态创建的文本框输入生成不同的名称

1 个答案: