JS Function not called from dynamically loaded elements

Question

I've a <div>, in which I'm adding <input> and an <a> dynanically using jQuery.

Like this:

<div> is getting filled when addServicePanel() is called:

function addServicePanel() {
    var wrapper = $(".main_wrapper"); //Fields wrapper
    var add_button = $(".add_ele_button"); //Add button ID
    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            $(wrapper).append('
                <div class="service_parent_div">
                    <div class="myContainer">
                        <div class="myPipeline">
                            <div class="form-group">
                                <label class="col-md-4 control-label">Pipeline</label>
                                <div class="col-md-4">
                                    <input id="pipeline" name="pipeline" type="text"/> </div>
                                    <a href="#" class="add_field_button">Add Board (+)</a> </div>
                        </div>
                        <div class="input_fields_wrap"></div>
                    </div>
                </div>
            '); //add input box
        }
    });
}

Function I've already written to work with .add_field_button:

function addSubPanel() {
    var max_fields = 40; //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).on("click", this, function (e) { //on add input button click
        alert("<a> cliked"); // THIS IS NOT GETTING CALLED
        e.preventDefault();
    });

}

When I click on the <a> tag, I want a function to be called, which I've already written in my js file.

Issue I'm facing is that fucntion is not getting called when I click .

I think it is because on page load, the element is not rendered yet, so nothing is binded with that function.

How can I fix it?

Thanks

You need to try `.on('click'. function....` instead of just `.click` event. check this out: https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery — uday8486, Dec 05 '19 at 14:20
Does this answer your question? [jQuery onclick not firing on dynamically inserted HTML elements?](https://stackoverflow.com/questions/18831568/jquery-onclick-not-firing-on-dynamically-inserted-html-elements) — besciualex, Dec 05 '19 at 14:23
@uday8486 1) that's still a static event handler, not a delegated one 2) The OP is already attempting to use a delegated handler. The issue is the arguments they provide (specifically `this`) — Rory McCrossan, Dec 05 '19 at 14:24

score 2 · Answer 1 · answered Dec 05 '19 at 14:20

When you dynamically add items you need to use

$('body').on('click','.add_field_button a', function (e) {})

By doing this, you attach the event listener to body an element which is static, and then it searches through DOM for element pointed by second selector, element which was added dynamically.

The way you did it, you attached the event to a non existent DOM element. That's why it didn't worked.

Ukesh Shrestha · Accepted Answer · 2019-12-05T14:29:33.477

2

change this code to

 $("body").on("click", ".add_field_button", function (e) { 
    alert("<a> cliked");
    e.preventDefault();
});

Dynamically loaded elements won't have event registered unless you delegate from the elements already loaded on registering of the event. here the event registration is delegated from body of the DOM.

edited Dec 05 '19 at 14:29

answered Dec 05 '19 at 14:25

Ukesh Shrestha

190
9

You should add some text about how and why it works. – Adder Dec 05 '19 at 14:27

JS Function not called from dynamically loaded elements

2 Answers2