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 - 动态输入框以及每行

1 个答案: