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