Fatal编程技术网
  • javascript/
  • 使用Javascript将事件附加到动态创建的元素

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

javascript jquery html

使用Javascript将事件附加到动态创建的元素,javascript,jquery,html,Javascript,Jquery,Html,我动态添加输入并为此输入写入事件。事件工作，但所有第二个输入都是相同的s。我想为彼此做一件事 JavaScript: $(document).ready(function() { var max_fields = 4; //maximum input boxes allowed var wrapper = $(".input_fields_wrap"); //Fields wrapper var add_button = $(".add_f

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

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());
            });

});

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x”）；//添加输入框
$（“.test”）。在（“输入”，函数（）{
$（this.closest（'div'）.find（'.test2'）.val（$（this.val（））；
});
}
});
$（包装器）。在（“单击”，“删除”字段）上，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
x--；
});
$（“.test”）。在（“输入”，函数（）{
$（this.closest（'div'）.find（'.test2'）.val（$（this.val（））；
});
});
HTML:


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

$(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--;
    });


});
更新：

$(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--;
    });


});

$（document）.on（'input'，'.dynamic'，function（））{
console.log（“输入1”）；
});
$（document）.on（'input'，'.dynamic2'，function（）{
console.log（“输入2”）；
});
$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（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>


添加更多字段
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());
    });

});

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x
您可能需要查看上面的演示…它可以根据您的需要工作..我在类或jQuery中做了一些更改

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x”）；//添加输入框
$（“.test”）.on（“输入”，函数（）{
$（this.closest（'div'）.find（'.test2'）.val（$（this.val（））；
});
//你的活动代码放在这里//
//它查找所有输入并添加事件//
}
});
$（包装器）。在（“单击”，“删除”字段）上，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
x--；
});
$（“.test”）.on（“输入”，函数（）{
$（this.closest（'div'）.find（'.test2'）.val（$（this.val（））；
});
});


添加更多字段



ID必须是唯一的，可能与欢迎使用堆栈溢出的ID重复！请拿着，环顾四周，通读一遍，尤其是我恐怕根本不清楚你在问什么。当向其他人寻求帮助时，请花时间用一致、可读的格式和缩进格式化你的代码。（我在这个场合为您修复了它。）我在所有输入2处得到相同的第一个输入结果。当我点击添加按钮时，我在所有输入2处得到相同的结果。但是我想得到我设置为input 1$（“.input\u fields\u wrap”）.on（“input”，“input”，function（）{$（“.input\u fields\u wrap.test2”）.val（$（“.input\u fields\u wrap.test”）.val（）；）的其他结果；此事件在哪里？由于这些是动态部分，您必须使用：$（document）.on（'input'，'.dynamic'，function（）{console.log（“输入1”）；}）$（document）.on（'input'，'.dynamic2'，function（）{console.log（“输入2”）；}）；我想将值设置为input1，并在input2$（包装器）上获取它；我在input中添加了类dynamic请参见上文我想将值设置为input1，并在Input2上获取它谢谢！：俬俬俬）但我将源代码复制到jsp文件中。不行.怎么了？我改了班名。第一个输入耦合不工作。但是其他几对工作很糟糕…但是您需要添加类