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

205

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.

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

260

jQuery

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

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

237

jQuery

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

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

408

jQuery

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

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

267