jquery - 动态添加字段不能完全发挥作用答案

【问题标题】：jquery - Add field dynamically not functioning fullyjquery - 动态添加字段不能完全发挥作用
【发布时间】：2023-03-17 20:50:02
【问题描述】：

基于来自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>

参考我在链接的代码笔中所做的，当按下“新组”链接时，字段生成正常。但是，单击“新建选项”按钮后不会创建任何内容。您可以在 JS 部分看到我编写了一些代码来创建字段，但它只是不起作用。知道为什么吗？顺便说一句，我对 javascript/jquery 很陌生，所以，如果这只是一个愚蠢的错误，我很抱歉。提前致谢！

【问题讨论】：

标签： javascript jquery dynamic field

【解决方案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)，否则，上面的代码将为您工作！

【讨论】：

非常感谢！结合 Lajos Arpad 的回答，效果很好！

【解决方案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 是要执行的事件处理程序

【讨论】：