Question

我动态添加输入并为此输入写入事件。事件工作，但所有第二个输入都是相同的。我想为彼此做事。

JavaScript的：

$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
            var wrapper = $(".input_fields_wrap"); //Fields wrapper
            var add_button = $(".add_field_button"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function (e) {
                e.preventDefault();
                if (x < max_fields) { //max input box allowed
                    x++; //text box increment
                    $(wrapper).append('<div><input id="test" class="test"  type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a><br><input id="test2" class="test2" type="text" name="mytext2[]"></div></div>'); //add input box

                    $(".test").on("input", function () {
                        $(this).closest('div').find('.test2').val($(this).val());
                    });
                }
            });

            $(wrapper).on("click", ".remove_field", function (e) {
                e.preventDefault();
                $(this).parent('div').remove();
                x--;
            });

            $(".test").on("input", function () {
                $(this).closest('div').find('.test2').val($(this).val());
            });

});

HTML：

<div id="input_fields_wrap" class="input_fields_wrap">
        <button class="add_field_button">Add More Fields</button>
        <div><input id="test" class="test" type="text" name="mytext[]"></div>
        <div><input id="test2" class="test2" type="text" name="mytext2[]"></div>
    </div>

Answer 1

您可以向所有动态创建的元素添加一个类，然后在以下列方式实际创建事件之前将事件侦听器附加到该类：假设你要授予的课程是动态：

$(document).on('event','.dynamic',function(){
  console.log($(this));
});

<强>更新：

$(document).on('input','.dynamic',function(){
  console.log("Typing in input 1");
});
$(document).on('input','.dynamic2',function(){
  console.log("Typing in input 2");
});
$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input id="test" class="dynamic"  type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a><div><input id="test2" class="dynamic2" type="text" name="mytext2[]"></div></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });


});

HTML将

<div id="input_fields_wrap" class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input id="test" class="dynamic" type="text" name="mytext[]"></div>
    <div><input id="test2" class="dynamic" type="text" name="mytext2[]"></div>
</div>

Answer 2

jQuery首先找到all标签并添加事件。所以你需要在添加字段后分配事件...

$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input id="test" class="test dynamic"  type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a><div><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box

 $('.dynamic').on('event',function(){
    // Your Code
});
 //   Your Event Code Put Here   //
// It Find the all input and add event // 

        }
    });

    $(wrapper).on("click", ".remove_field", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

    $(".input_fields_wrap").on("input", "input", function() {
        $(".input_fields_wrap .test2").val($(".input_fields_wrap .test").val());
    });

});

Answer 3

你可能需要看到上面的演示......它可以根据你的需要工作..我在课堂或jQuery中做了一些改变......

$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input id="test" class="test dynamic"  type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a><br><input id="test2" class="test2 dynamic" type="text" name="mytext2[]"></div></div>'); //add input box

     $(".test").on("input", function() {
  $(this).closest('div').find('.test2').val($(this).val());
    });
 //   Your Event Code Put Here   //
// It Find the all input and add event // 

        }
    });

    $(wrapper).on("click", ".remove_field", function(e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });

    $(".test").on("input", function() {
        $(this).closest('div').find('.test2').val($(this).val());
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="input_fields_wrap" class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div>
    <input id="test" class="test" type="text" name="mytext[]"/> 
    <bR/> 
    <input id="test2" class="test2" type="text" name="mytext2[]"/>
    </div>
</div>

使用Javascript将事件附加到动态创建的元素

3 个答案: