Bind click events on loaded ajax contents

Question

I'm trying to load contents through ajax and then perform some click events on those contents.

So basically I want to first load the contents(Buttons in this case) and then apply some click events on them .

and hence I'm using callbacks for the purpose to load the contents first and then apply click events , but here I've a problem that the content is loaded after the callback function, and I don't want this, I want to load the content first then execute callback function, how to solve this problem?

To achieve this till now I've the following code.

I've following code in food.php:

<button onclick="findWeek(fun)">week</button>    // fun is callback function passed to findWeek()

// findWeek function ------ AJAX request to load buttons ------:

function findWeek(fun)      
             {              
                var xhr =  new XMLHttpRequest();
                xhr.open("GET" ,"start.php",true);
                xhr.send(null);
                xhr.onreadystatechange = function(){
                    if( (xhr.readyState == '4') && ( xhr.status == '200') ){

                        document.getElementById("stats").innerHTML = xhr.responseText;
                    }

                };


                fun();
            }

// fun function, is a callback function, and I'm assuming that this will come in action when the findWeek() function load the contents,meaning that it will load the required buttons from the page start.php inserting those buttons to the following div which is inside food.php.

<div id = 'stats'>
</div>

And after that I want to be able to click those loaded buttons then which are supposed to be there in the above div.

That's why I've fun() function something like following.

Note: I've defined class .dayBtns for the loaded buttons.

function fun(){

    function myfunction(){
        alert('just clicked the button');
    }
    var dayBtns = document.getElementsByClassName('dayBtns');
    alert('contents should be loaded');
    for(var i = 0; i < dayBtns.length; i++){
        console.log(dayBtns[i]);
        btns[i].addEventListener('click', myfunction);
        }

}

The problem is the content is loading after the fun() function execution, how to restrict fun() function not to execute until the data is not loaded ?

Please help , thanks !

Answer 1

Just place fun() into onreadystatechange like so -

function findWeek(fun) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "start.php", true);
    xhr.send(null);
    xhr.onreadystatechange = function() {
        if ((xhr.readyState == '4') && (xhr.status == '200')) {

            document.getElementById("stats").innerHTML = xhr.responseText;
            fun();
        }

    };


}

The innerHTML is set after the function fun is called so there are no elements in the DOM at that point.

You also have a typo on the code here:

 for(var i = 0; i < dayBtns.length; i++){
    console.log(dayBtns[i]);
    btns[i].addEventListener('click', myfunction);
 }

Should be:

 for(var i = 0; i < dayBtns.length; i++){
    console.log(dayBtns[i]);
    dayBtns[i].addEventListener('click', myfunction);
 }

Notice dayBtns vs btns