Почему увеличивается количество проходов по куску кода?

Есть код со структурой Выбрали Х->Выбрали У->Выбрали З->Подгружаем Ajax (Прошу обратить внимание на console.log(response); в Ajaxe)

jQuery(document).ready(function(){

$('input:radio[name="item01_radio"]').change(function() {

    $('input:radio[name="item11_radio"]').change(function() {

        $('input:radio[name="radio_service"]').change(function() {

            var service = $('input:radio[name="radio_service"]:checked').val();
            var day_ajax = $('input:radio[name="item11_radio"]:checked').val();
            var user_name = document.getElementById("user_name").value;

            document.getElementById('item4').innerHTML = "";
            var elem = document.getElementById('item4');

            $.ajax({
                type: "POST",
                url: 'php/array_master_time.php',
                data: { 
                    "master": user_name, "date_name_general": day_ajax, "service": service
                },

                success: function(response)
                {
                    var response = JSON.parse(response);

                    console.log(response);
                },
                error: function(jqXHR, exception)
                {
                    if (jqXHR.status === 0) {
                        alert('НЕ подключен к интернету!');
                    } else if (jqXHR.status == 404) {
                        alert('НЕ найдена страница запроса [404])');
                    } else if (jqXHR.status == 500) {
                        alert('НЕ найден домен в запросе [500].');
                    } else if (exception === 'parsererror') {
                        alert("Ошибка в коде: \n"+jqXHR.responseText);
                    } else if (exception === 'timeout') {
                        alert('Не ответил на запрос.');
                    } else if (exception === 'abort') {
                        alert('Прерван запрос Ajax.');
                    } else {
                        alert('Неизвестная ошибка:\n' + jqXHR.responseText);
                    }
                }
            }); 
        });
    });
});

});

В итоге на выходе я получаю такую закономерность: если я выбираю Х,У,З (выводится console.log(response); 1 раз), после меняю выбор предположим У и дальше выбираю также З, то console.log(response); выводится уже два раза (в общей сумме в консоли я уже имею три вывода), и тд с увеличением на единицу. Если в показанной мною структуре нет ошибки и такого быть не должно, то после я отредактирую вопрос и выложу полный код.


Ответы (1 шт):

Автор решения: Igor

Все нормально, кода достаточно.

Давайте расскажем человеческим языком, что здесь происходит.

$('input:radio[name="item01_radio"]').change(function() {

    $('input:radio[name="item11_radio"]').change(function() {

        $('input:radio[name="radio_service"]').change(function() {

            ...

На событие изменения выбранной радиокнопки с именем item01_radio назначается (но не выполняется) обработчик события изменения выбранной радиокнопки с именем item11_radio. Если Вы теперь еще раз измените выбранную радиокнопку с именем item01_radio, радиокнопкам item11_radio назначится еще один такой же обработчик - таких обработчков будет прикреплено к кнопкам item11_radio уже два. Если теперь Вы измените выбранную радиокнопку с именем item11_radio, выполнятся оба эти обработчика. Дальше в этой цепочке происходит то же самое, только на уровень глубже.

Простое правило - избегайте навешивать обработчики событий внутри других обработчков событий. Исключение - событие $(document).ready.


$('input:radio[name="item01_radio"], input:radio[name="item11_radio"], input:radio[name="radio_service"]').change(function() {

    var service = $('input:radio[name="radio_service"]:checked').val();
    var day_ajax = $('input:radio[name="item11_radio"]:checked').val();
    var item01 = $('input:radio[name="item01_radio"]:checked').val();

    if (service == '' || day_ajax == '' || item01 == '')
        return;

    ...
→ Ссылка