javascript - 在加载的ajax内容上绑定(bind)点击事件

Question

我正在尝试通过ajax加载内容，然后对这些内容执行一些点击事件。

所以基本上我想首先加载内容(在本例中为按钮)，然后对其应用一些点击事件。

因此我使用回调来首先加载内容，然后应用点击事件，但这里我遇到一个问题，内容是在回调函数之后加载的，我不想这样，我想先加载内容然后执行回调函数，如何解决这个问题？

为了实现这一目标，到目前为止，我有以下代码。

我在food.php中执行了以下代码:

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

//findWeek 函数 ------ AJAX 请求加载按钮 ------:

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 函数，是一个回调函数，我假设当 findWeek()函数加载内容，这意味着它将从 start.php 页面加载所需的按钮，并将这些按钮插入 food.php 内的以下 div。

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

之后，我希望能够单击那些加载的按钮，这些按钮应该位于上面的 div 中。

这就是为什么我有 fun() 函数，如下所示。

注意:我已经为加载的按钮定义了类.dayBtns。

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

}

问题是fun()函数执行后正在加载内容，如何限制fun()函数在数据未加载之前不执行？

请帮忙，谢谢!

Answer 1

只需将 fun() 放入 onreadystatechange 中，如下所示 -

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

    };


}

innerHTML 是在调用函数 fun 之后设置的，因此此时 DOM 中没有元素。

这里的代码也有一个拼写错误:

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

应该是:

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

注意dayBtns与btns