0

我正在尝试通过 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将这些按钮插入到内部的以下 div 中food.php。

<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()函数在没有加载数据之前不执行？

请帮忙，谢谢！

4

1 回答 1

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

于 2019-03-26T14:39:04.347 回答