Attaching Events To Dynamically Created Elements With Javascript

Question

I add input dynamically and write event for this input. Event work, but all the second inputs are the same s. I want to do event for each other.

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>

Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Mar 03 '17 at 09:07
Welcome to Stack Overflow! Please take the [tour], have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I'm afraid it's not at all clear what you're asking. — T.J. Crowder, Mar 03 '17 at 09:08
When asking others for help, please take the time to format your code with consistent, readable formatting and indentation. (I've fixed it for you on this occasion.) — T.J. Crowder, Mar 03 '17 at 09:11

Shakti Phartiyal · Answer 1 · 2017-03-03T09:37:26.447

You can add a class to all your dynamically created elements and then attach an event listener to the class before the event is actually created in the following manner: Assuming the class you'll be giving is dynamic:

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

UPDATE:

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


});

And the HTML would be

<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>

I get the same first input result at all input 2. When i click to add button i get the same result at all input 2. But i want to get other result what i set to input 1 — Huseyn Guliyev, Mar 03 '17 at 09:33
$(".input_fields_wrap").on("input", "input", function() { $(".input_fields_wrap .test2").val($(".input_fields_wrap .test").val()); }); — Huseyn Guliyev, Mar 03 '17 at 09:48
As these are dynamic sections you will have to use: $(document).on('input','.dynamic',function(){ console.log("Typing in input 1"); }); $(document).on('input','.dynamic2',function(){ console.log("Typing in input 2"); }); — Shakti Phartiyal, Mar 03 '17 at 09:50

Chirag Suthar · Answer 2 · 2017-03-03T09:58:31.563

jQuery first find the all tag and add event. so you can need to assign event after add field...

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

});

$(wrapper).append('
Remove
'); – Chirag Suthar Mar 03 '17 at 09:56 — Chirag Suthar, Mar 03 '17 at 09:56
i add the class dynamic in input please see above – Chirag Suthar Mar 03 '17 at 09:57 — Chirag Suthar, Mar 03 '17 at 09:57
I want to set value to input1 and get it on input2 – Huseyn Guliyev Mar 03 '17 at 09:58 — Huseyn Guliyev, Mar 03 '17 at 09:58

Chirag Suthar · Accepted Answer · 2017-03-03T11:40:55.030

0

may you need to see the demo as above...it works as you need..i maked some changes in class or 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>

edited Mar 03 '17 at 11:40

answered Mar 03 '17 at 10:09

Chirag Suthar

178
1
13

Thank you! :)))))) – Huseyn Guliyev Mar 03 '17 at 10:54
But i copy source code to jsp file. it doesn`t work.What is happen? – Huseyn Guliyev Mar 03 '17 at 11:01
I change class name. The first input couple not work. But other couple work – Huseyn Guliyev Mar 03 '17 at 11:05
Sorry...but you need to add the classs `test` and `test2` in first input tag replace with this code... `

` – Chirag Suthar Mar 03 '17 at 11:36
Please Replace Your First two input box code with Above Code....(Please see in example....) – Chirag Suthar Mar 03 '17 at 11:41
I change classes name test and test2. But first input couple not work – Huseyn Guliyev Mar 03 '17 at 11:44
How can you help me – Huseyn Guliyev Mar 03 '17 at 12:13
– Huseyn Guliyev Mar 03 '17 at 12:22
$(wrapper).append('
Remove
'); – Huseyn Guliyev Mar 03 '17 at 12:23
– Chirag Suthar Mar 03 '17 at 12:24

Attaching Events To Dynamically Created Elements With Javascript

3 Answers3