Question

基于here的教程，我尝试制作一些可以通过按钮动态添加的字段，并通过另一个按钮删除。除了应该动态创建的另一组字段没有添加任何内容之外，它几乎正常工作。

这是我在codepen所做的。

    <div class="field_wrapper">    
            <a href="javascript:void(0);" class="add_button" title="Add field">New Group</a>  
    </div>

    <script>
        $(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><a href="javascript:void(0);" class="remove_button" title="Remove field">X</a><table id="add_on_table"><tbody><tr><td><label class="field">Group Name</label><input type="text" name="product_addon_name[]"></td><td><input type="checkbox" name="product_addon_required[]"> Mark as Required</td></tr><tr><td><label class="field">Group Description </label><textarea name="product_addon_description[]"></textarea></td></tr><tr><table><thead><tr><td>Option Label</td><td>Option Price (RM) </td></tr></thead><tbody class="addonoption"><tr><td><input type="text" name="product_addon_option_label[]"></td><td><input type="text" name="product_addon_option_price[]"></td><td><a href="javascript:void(0);" class="remove_row" title="Remove field">X</a></td></tr> </tbody><tfoot><tr><td><input type="button" class="add_option" value="New Option"></td></tr></tfoot></table></tr></tbody></table></div>'; //New input field html 
    var AddRow = $('.add_option'); //Add button selector
    var RowWrapper = $('.addonoption'); //Input field wrapper
    var rowHTML = '<tr> <td><input type="text" name="product_addon_option_label[]"></td><td><input type="text" name="product_addon_option_price[]"></td><td><a href="javascript:void(0);" class="remove_row" title="Remove field">X</a></td></tr>';    
    var x = 1; //Initial field counter is 1   
    $(AddRow).click(function(){ //Once add button is clicked     
      $(RowWrapper).append(rowHTML); // Add field html           
    });
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
          $(wrapper).append(fieldHTML); // Add field html
        }
    }); 
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
    });</script>

参考我在链接的codepen中所做的事情，当按下“新组”时，生成的字段为OK。链接。但是，按钮＆＃39;新选项＆＃39;点击后不会创建任何内容。您可以在JS部分看到我编写一些代码来创建字段，但它只是不起作用。知道为什么吗？顺便说一句，我在javascript / jquery上非常棒，所以，对不起，如果它只是一个愚蠢的错误。提前谢谢！

Answer 1

您还需要将event delegation与.add_option元素一起使用。由于它们是在最初呈现DOM之后创建的，因此您的单击处理程序不会附加到任何内容。您对.remove_button使用事件委派，因此您可以复制该语法以使其正常工作：

$(document).on("click", ".add_option", function(){ //Once add button is clicked  
    $(this).closest("table").find(".addonoption").append(rowHTML);         
});

另外，我注意到你的选择器也可能搞砸了，因为如果你有多个组，它会将html添加到每个组中。如果这是预期的行为，您可以将选择器更改为$(".addonoption").append(rowHTML)，否则，上述代码将适合您！

Answer 2

问题在于，当您尝试向AddRow添加单击处理程序时，您的按钮尚不存在。您需要使用.on() function，而不是为AddRow创建处理程序。例如：

$(".field_wrapper").on("click", ".add_option", function() {alert("foo");});

说明：

.field_wrapper

on作为选择器已经存在
click是您打算处理的事件
.add_option是一个选择器，适用于与.field_wrapper

.add_option

function是要执行的事件处理程序

jquery - 动态添加字段不能完全运行

2 个答案: