Javascript - AddEventListener на ajax.always ()

У меня есть список категорий поставщиков и поставщиков, загружаемых с помощью ajax на странице, и я добавил флажок рядом с каждым из них.

  1. When the ajax call is done, я добавляю EventListener для каждого флажка, чтобы иметь дело с отмеченным / снятым флажком.

  2. Я вызываю get_dispos_fournisseurs when I checked/unchecked a category, потому что мне нужно перезагрузить провайдеров.

Проблема в том, что мой javascript не всегда вызывается. Это потому, что мой ajax на самом деле не работает, или потому, что он асинхронный? Если да, то как я могу это исправить?

Заранее спасибо :)

 xhrLoad_panneau = $.ajax({
        type: "post",
        url: path_to_load_panneau,
        data: "contexte = " + contexte ,
        success: function () {

            for (var i in fournisseurs) {

                  $(bloc_fournisseur).append("<input id='"+fournisseurs[i][15]+"' class='progi' categorie='" + fournisseurs[i][11] +"' distance='"+ distance_text +"' provider_name='"+fournisseurs[i][2]+"' name='fournisseur' type='checkbox' />");
                            $(bloc_fournisseur).append("<img class='progi-img' src='/assets/progi/calendrier.png' alt='progi' />");

    }).always(function(){
            get_dispos_fournisseurs();
    });


function get_dispos_fournisseurs(){

    var myFunction = function (event) {

        document.getElementById("btn-dispos").disabled = ($("input[name='fournisseur']:checked").length < 1) ? true : false;

        if ($("input[name='fournisseur']:checked").length > 5) {
            this.checked = false;
        } else {

            if (this.checked) {
                ids[this.id] = [this.getAttribute('provider_name'), this.getAttribute('distance')];
            } else {
                delete ids[this.id];
            }
        }
    };


    var checkboxes = document.getElementsByClassName('progi');
    for (i = 0; i < checkboxes.length; i++){
        checkboxes[i].removeEventListener("change", myFunction, false);
        checkboxes[i].addEventListener('change', myFunction, false);
    }
}

я предполагаю, что у кода возникают проблемы с поиском myFunction(), поскольку он вложен в get_dispos_fournisseurs() - можете ли вы попробовать переместить myFunction() в глобальную область видимости?

Doug 31.05.2018 22:22

@Doug похоже, что myFunction вызывается только в своей лексической области видимости из того, что я вижу. Где вы видите, что это называется вне сферы действия?

dgeare 31.05.2018 22:25

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

Noémie Harvey 31.05.2018 22:25

@dgeare Я начал свой комментарий со слов «моя лучшая догадка», потому что это все, что у меня было :) Мне было любопытно, поможет ли продвижение области действия функции для событий изменения устранить ошибку

Doug 31.05.2018 22:29

@ NoémieHarvey, вы можете попробовать добавить несколько сообщений console.info () в случае успеха и всегда (возможно, даже get_dispos_fournissuers), чтобы увидеть, когда и как часто каждое из них вызывается

Doug 31.05.2018 22:31

@ NoémieHarvey где определяется fournisseurs?

dgeare 31.05.2018 22:31

@dgeare fournisseurs определен в файле js, почему?

Noémie Harvey 31.05.2018 22:33

@ NoémieHarvey было любопытно, был ли он загружен асинхронно и, возможно, undefined (или пустым) в то время, когда происходит цикл for

dgeare 31.05.2018 22:36

Кроме того, вам кажется, что вам не хватает закрывающего } в этом цикле for из того, что я вижу

dgeare 31.05.2018 22:37

@dgeare проблема действительно связана с событием change, которое не всегда вызывается флажками.

Noémie Harvey 31.05.2018 22:38

если они не работают должным образом, можете ли вы проверить прикрепленные прослушиватели событий в chrome devtools и убедиться, что к событию изменения привязано 0 слушателей?

dgeare 31.05.2018 22:50

Я обнаружил одну ошибку: removeEventListener на самом деле ничего не делает, поскольку вы переопределяете myFunction при каждом вызове функции. Попробуйте переместить myFunction за пределы функции и посмотрите, исправит ли это что-нибудь.

patstuart 31.05.2018 23:33

@dgeare Я отлаживал в консоли, когда я зацикливаю свои флажки, добавляется прослушиватель событий "изменение". но когда я устанавливаю флажок, ничего не происходит (некоторые работают, другие нет, так что это действительно сбивает с толку) ...

Noémie Harvey 01.06.2018 15:36
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
13
68
0

Другие вопросы по теме