Click listener to ajax loaded content. Pure javascript

Question

I have this javascript which loaded some content block by ajax

var sendContainer = document.getElementById("loadForm");

        sendContainer.addEventListener("click", function (event) {

      var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        // Show loaded content block in result div
                    document.getElementById("result").innerHTML = xmlhttp.responseText;

                }
            };
            var form = document.getElementById('ajax_send_message');
            var formData = new FormData(form);

            xmlhttp.open("GET", '/ajax', true);
            xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
            xmlhttp.send(formData);
 });

And loaded content block

<button type="button" id="ajax_submit"">Send</button>

How to force this addEventListener to get id (ajax_submit) from dynamically loaded block

document.getElementById("ajax_submit").addEventListener("click", function (event) {
alert('WORK!');

});

are you sure your `xmlhttp.open()` method is syntactically correct? also to add the event listener dynamically, just do it inside your onreadystate change — Jay Ghosh, Aug 04 '16 at 10:27
Unrelated: you bother to check whether the browser provides XMLHttpRequest but then you try to use `.open` on it regardless. — moopet, Aug 04 '16 at 10:36
You javascript is invalid.You have an extra quotes in `xmlhttp.open()` statement. Please post your working code here. And coming to the question, do you need to add an event listner to an element which is dynamically loaded via ajax? — Lucky, Aug 04 '16 at 10:46
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Sami, Aug 04 '16 at 11:04

Jay Ghosh · Accepted Answer · 2016-08-04T10:48:52.387

Just add that line inside the onreadystatechange event listener of the XMLHttpRequest().

Like this

var sendContainer = document.getElementById("loadForm");

    sendContainer.addEventListener("click", function (event) {

  var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

    // Show loaded content block in result div
                document.getElementById("result").innerHTML = xmlhttp.responseText;
                 document.getElementById("ajax_submit").addEventListener("click", function (event) {
                 alert('WORK!');
                });

            }
        };
        var form = document.getElementById('ajax_send_message');
        var formData = new FormData(form);

        xmlhttp.open("GET", '/ajax', true);
        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xmlhttp.send(formData);
 });

score -1 · Answer 2 · answered Aug 04 '16 at 11:03

-1

U should use jquery $.on like you can write following code any where in your page srcipt

 $(document).on('someevent', 'yourelemenid', function(){
    alert('work');
 });

answered Aug 04 '16 at 11:03

Sami

7,326
6
59
91

OP stipulated "pure JavaScript" – MerlinTheMagic Aug 04 '16 at 12:10

Click listener to ajax loaded content. Pure javascript

2 Answers2