Question

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

所以基本上我想先加载内容（在这种情况下为Buttons），然后在其上应用一些click事件。

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

到目前为止，要实现此目的，我需要以下代码。

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

    };


}

将内部HTML设置为之后，然后调用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

在已加载的ajax内容上绑定单击事件

1 个答案: