Связывать события щелчка на загруженном содержимом AJAX - PullRequest
Новая
       14

Связывать события щелчка на загруженном содержимом AJAX

0 голосов
/ 26 марта 2019

Я пытаюсь загрузить содержимое через ajax, а затем выполнить некоторые события щелчка для этого содержимого.

Так что в основном я хочу сначала загрузить содержимое (в данном случае кнопки), а затем применить к ним некоторые события щелчка.

и, следовательно, я использую callbacks с целью сначала загрузить содержимое, а затем применить события щелчка, но здесь у меня проблема в том, что содержимое загружается после функции обратного вызова, и я не не хочу этого, я хочу сначала загрузить содержимое, а затем выполнить функцию обратного вызова, как решить эту проблему?

Для достижения этой цели у меня есть следующий код.

У меня следующий код в 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() загрузит содержимое, то есть будет загружать нужные кнопки из page 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() до тех пор, пока данные не будут загружены?

Пожалуйста, помогите, спасибо!

1 Ответ

1 голос
/ 26 марта 2019

Просто поместите 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

...