Jquery

Question

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

默认外观：

INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON]

点击[Add_Button]再添加一行如下等等

INPUT_BOX [DISABLED_ADD_BUTTON] [REMOVE_BUTTON]
INPUT_BOX [DISABLED_ADD_BUTTON] [REMOVE_BUTTON]
INPUT_BOX [DISABLED_ADD_BUTTON] [REMOVE_BUTTON]
INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON]

以下方法创建了类似的方法，但新添加的添加按钮不起作用。只有顶行添加按钮有效

     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--;
});

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>

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

谢谢。

Answer 1

也尝试使用 event delegation 作为添加按钮，

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

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

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

Jquery - Dynamic Input Box along with add/ remove button in every row

html

javascript

dynamic