Почему увеличивается количество проходов по куску кода?
Есть код со структурой Выбрали Х->Выбрали У->Выбрали З->Подгружаем 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 шт):
Все нормально, кода достаточно.
Давайте расскажем человеческим языком, что здесь происходит.
$('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;
...