jquery

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>

参考我在 linked codepen 中所做的，当按下 'New Group' link 时，字段生成正常。但是，按钮 'New Option' 在单击后不会创建任何内容。你可以在 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 添加点击处理程序时，您的按钮尚不存在。您无需为 AddRow 创建处理程序，而是需要使用 .on() function。示例：

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

解释：

.field_wrapper 因为当您调用 on
click 是您打算处理的事件
.add_option 是一个选择器，它将应用于 .field_wrapper 中与 .add_option
function是要执行的事件处理器

jquery - 动态添加字段功能不全

jquery - Add field dynamically not functioning fully

javascript

field

dynamic