jQuery обработчик нажатия checkbox, которого еще нет

247
16 февраля 2018, 18:09

Есть обработчки нажатия на input checkbox

$(":checkbox").change(function () {
    if (this.checked) {
        $(":checkbox").css("box-shadow", "0 0 20px green");
    } else {
        $(":checkbox").css("box-shadow", "0 0 20px red");
    }
});

Если на странице уже есть checkbox (в html) , то работает. Если нет ни одного checkbox до загрузки страницы - не работает.

Вопрос: как сделать, чтобы обработчик работал , даже если chеckbox добавляется после загрузки страницы (в jQuery)

Answer 1

Обработчик нужно навешивать на все, вновь создаваемые, элементы вручную

jQuery(function($) { 
  var checkClick = function() { 
    if (this.checked) { 
      $(":checkbox").css("box-shadow", "0 0 20px green"); 
    } else { 
      $(":checkbox").css("box-shadow", "0 0 20px red"); 
    } 
  }; 
 
  $(":checkbox").change(checkClick); 
   
  $(":button").click(function() { 
    $(this).before( 
      $('<input type="checkbox" />').change(checkClick) 
    ); 
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" /> 
<input type="button" value="Add">

Но, конкретно в Вашем случае, можно обойтись чистым CSS

jQuery(function($) { 
  $(":button").click(function() { 
    $(this).before( 
      $('<input type="checkbox" />') 
    ); 
  }); 
});
input[type="checkbox"] { 
  box-shadow: 0 0 20px red; 
} 
 
input[type="checkbox"]:checked { 
  box-shadow: 0 0 20px green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" /> 
<input type="button" value="Add">

Answer 2

С помощью jQuery можно повесить обработчик события на блок, в который помещаются ваши checkbox, или даже на body. Т.е. так:

$('body').on('change',':checked', function() {
if (event.target.checked) {
    $(":checkbox").css("box-shadow", "0 0 20px green");
} else {
    $(":checkbox").css("box-shadow", "0 0 20px red");
}
});

Но в вашем случае действительно лучше подойдет css.

READ ALSO
Помощь с калькулятором jquery
jQuery

Помощь с калькулятором jquery

Вроде получается определить значения полей, но как их суммировать и чтобы выводилось в результат - совсем не получаетсяЗаранее спасибо за помощь

 295
jquery clone() дублирует клонированные обьекты
jQuery

jquery clone() дублирует клонированные обьекты

начну сначала, потому что не уверен где проблема скрываетсяесть проект где страницы загружаются путем ajax в том числе и javascript'ы путем

 264
Выбирать input в уровнях таблицы
jQuery

Выбирать input в уровнях таблицы

Добрый день! Использую плагин для создания многоуровневой таблицы https://wwwjqueryscript

 446
Передача данных в e-commerce (analytics) из ajax запроса
jQuery

Передача данных в e-commerce (analytics) из ajax запроса

Добрый день! Прошу помочь решить вопрос передачи в аналитикс данных о заказе с формы покупки в 1 клик которая работает на AjaxВот сам код, php часть...

 309