0

Есть обработчки нажатия на 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)

5
  • $(':checkbox').on('change', function () { });
    – soledar10
    14 фев 2018 в 11:40
  • @soledar10 и чем этот код поможет, если элементы создаются после установки обработчика? 14 фев 2018 в 11:50
  • @AntonShchyrov напримет тем, что api.jquery.com/on on слушает динамический контент
    – dluhhbiu
    14 фев 2018 в 12:00
  • 1
    @dluhhbiu Это если на родителя повесить и указать дополнительный селектор (кстати, спасибо, я этого не знал). А soledar10 предлагает вешать на сами чекбоксы 14 фев 2018 в 12:11
  • @AntonShchyrov Вы правы, не заметил этого
    – dluhhbiu
    14 фев 2018 в 12:56

2 ответа 2

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">

1
  • Спасибо большое!
    – dogfox
    14 фев 2018 в 12:22
1

С помощью 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.

2
  • Кстати с CSS - вопрос. ТС вешает стили на все чекбоксы, а не на кликнутый. Если это не ошибка, то CSS не поможет 14 фев 2018 в 12:16
  • @AntonShchyrov Да, в таком случае css действительно не подойдет, но на самом деле такое действие выглядит весьма сомнительно(вешать стили на все чекбоксы) 14 фев 2018 в 12:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.