Question

$(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_form_wrap"); //form wrapper
    var wrapper1 = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID
    var x = 1; //initlal text box count
    var y = 1;
    $(wrapper).on("click", ".add_form_button", function () {
        // f.preventDefault();
        if (y < max_fields) { //max input box allowed
            y++;
            // alert('hi');
            $(wrapper).append('<div><div><button class="add_field_button">Add More Fields</button></div><div><input type="text" name="mytext[]" placeholder="name"></div><a href="#" class="remove_field">Remove</a></div>');
        }

    });
});

以上是我的一个函数，它在按钮上调用另一个函数单击以添加字段。我正在创建一个具有动态可添加字段的动态可添加表单。添加字段的功能如下。

$(wrapper1).on("click",".add_field_button", function(e){ //user click on remove text
            e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper1).append('<div><input type="text" name="mytext[]" placeholder ="name"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

以下是我的观点。

<body>
    <div class= "input_form_wrap">
    <button class="add_form_button">Add another Form</button>
    <br></br>
    <br></br>
    <div class="input_fields_wrap">
        <button class="add_field_button">Add More Fields</button>
        <form action="index.php/home/addForm" method="post">
            <div ><input type="text" name="mytext[]" placeholder="name"></div>
        </div>
    </div>
    <input type="submit" value="submit" name="submit" />
</form>

问题是，从.append单击时，我添加字段的按钮不起作用。我已经使用了on（）函数，它仍然无法正常工作！救命！

Answer 1

执行以下代码时，HTML标记不存在。所以jQuery无法绑定click事件处理程序。

var add_button      = $(".add_field_button"); //Add button ID

尝试在追加HTML代码后添加任何处理程序

Answer 2

由于以下行：

$(wrapper).append('<div><div><button class="add_field_button">Add More Fields</button></div><div><input type="text" name="mytext[]" placeholder="name"></div><a href="#" class="remove_field">Remove</a></div>');

您正尝试将事件附加到.add_field_button之外的$(".input_fields_wrap");以上wrapper1

并且您的event到.add_field_button已附加到$(wrapper1).on("click",".add_field_button", function(e){，并且在wrapper1

中找不到该特定新添加的控件

因此，请将附加内容更改为wrapper - wrapper1并且工作正常

$(wrapper1).append('<div><div><button class="add_field_button">Add More Fields</button></div><div><input type="text" name="mytext[]" placeholder="name"></div><a href="#" class="remove_field">Remove</a></div>'); 
^^^wrapper1 here

<强> DEMO

<强>更新

<强> Updated DEMO

重组html

<button class="add_form_button">Add another Form</button>
<div class="container">
    <div class= "input_form_wrap">
        <div class="input_fields_wrap">
            <fieldset>
                <legend>Form 1</legend>
                <button class="add_field_button">Add More Fields</button>
                <form action="index.php/home/addForm" method="post">
                    <div>
                        <input type="text" name="mytext[]" placeholder="name"/>    
                    </div>
                    <input type="submit" value="submit" name="submit" />
                </form>
            </fieldset>
        </div>
    </div>
</div>

重组JS

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var x = 1; //initlal text box count
    var y = 1;
    $(".add_form_button").on("click",function(){
        if(y < max_fields){ //max input box allowed
            y++; 
            var cloned=$('.input_form_wrap:first').clone(); //clone the first form
            $(cloned).find('input[type=text]').val(''); //empty textboxes in cloned element
        $(cloned).find('form').children().filter('div').not('div:first').remove(); //keep only one textbox
            $(cloned).find('legend').html('Form '+y); //change legend text
            $(cloned).insertAfter('.input_form_wrap:last');// insert the cloned element before last form                  
        }
   });
   $('.container').on('click','.add_field_button',function(){
       if(x<max_fields)
       {
            x++;
            var cloned=$(this).next('form').find('div:first').clone(); //get its first div
            $(cloned).find('input[type="text"]').val(''); //empty its value
            $(cloned).append('<a href="#" class="remove">Remove</a>'); //add a remove button to cloned element
            $(cloned).insertBefore($(this).siblings('form').find('input[type=submit]')); //append it before submit button
       }
   });

   $('.container').on('click','.remove',function(){
       $(this).closest('div').remove();
       x--; //reduce number of textboxes once its removed
   });
});

<强>更新

<强> UPDATED DEMO2

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var x = 1; //initlal text box count
    var y = 1;
    $(".add_form_button").on("click",function(){
        if(y < max_fields){ //max input box allowed
            y++; 
            var cloned=$('.input_form_wrap:first').clone();
            $(cloned).find('input[type=text]').val('');
        $(cloned).find('form').children().filter('div').not('div:first').remove();
            $(cloned).find('legend').html('Form '+y);
            $(cloned).insertAfter('.input_form_wrap:last');                  
        }
   });
   $('.container').on('click','.add_field_button',function(){
       if($(this).next('form').find('input[type="text"]').length<max_fields)
       {//check the length of each input type=text present in that particular form instead of 'x'
            var cloned=$(this).next('form').find('div:first').clone();
            $(cloned).find('input[type="text"]').val('');
            $(cloned).append('<a href="#" class="remove">Remove</a>');
            $(cloned).insertBefore($(this).siblings('form').find('input[type=submit]'));
       }
   });

   $('.container').on('click','.remove',function(){
       $(this).closest('div').remove();
   });
    $('.container').on('click','.frmRemove',function(){
        if($('form').length<=1)
        {
            alert('Atleast one form should be present');   
            return
        }
        else
        {
            $(this).closest('.input_form_wrap').remove();
            y--;
        }


    })
});

append里面的按钮不是在jQuery中调用函数

2 个答案: