Javascript Jquery-动态输入框以及每行中的添加/删除按钮

基于JQuery的UI，用户可以在其中动态添加输入框。它应该如下所示

默认外观：

• 输入框[添加按钮][删除按钮]

单击[添加按钮]添加另一行，如下所示，依此类推

• 输入框[禁用添加按钮][删除按钮]
• 输入框[禁用添加按钮][删除按钮]
• 输入框[禁用添加按钮][删除按钮]
• 输入框[添加按钮][删除按钮]

下面的方法创建了类似的方法，但新添加的添加按钮不起作用。只有最上面的“添加”按钮起作用

     var x = 1; //initial text box count
     $(".add_field_button").click(function(e){ //on add input button click
                  e.preventDefault();
                  if(x < max_fields){ //max input box allowed
                      x++; //text box increment
                      $("#input_fields_wrap").append('<div style="padding-top:4px">\n<label></label>\n<input name="key_'+ x +'" class="key-value">\n<input name="value_'+ x +'" class="key-value">\n<button class="add_field_button" name="add" type="button">Add</button>\n<button name="remove" class="remove_field" type="button">Remove</button>\n</div>'); 
                  }
 });

   $("#input_fields_wrap").on("click",".remove_field", function(e){ //user click on remove text
                  e.preventDefault(); $(this).parent('div').remove(); x--;
});

var x=1//初始文本框计数
$（“.add_field_button”）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

使用的HTML代码段：

        <div id="input_fields_wrap">
          <div>
            <label>Properties</label>
            <input class="key-value" name="key_0" />
            <input class="key-value" name="value_0" />
            <button type="button" name="add" class="add_field_button">Add</button>
            <button type="button" class="remove_field" name="remove">Remove</button>
           </div>
        </div>

性质
添加
去除

我的要求是每行添加按钮和删除按钮处于活动状态。正在寻求帮助

---

谢谢。

尝试使用

事件委派

添加按钮

$("#input_fields_wrap").on("click", ".add_field_button", function(e) { 

第一个add按钮将起作用，因为当您为它注册事件时，它将在DOM中可用。但稍后添加的按钮在事件连接期间无法匹配