Не срабатывают скрипты для блоков, которые были сгенерированы посредством .html()

169

01 ноября 2021, 12:30

function generateNew() { 
  var data = `<div class="step">  
     <input id="opt21" type="checkbox"/> 
      <label for="opt21">red</label> 
      <input id="opt22" type="checkbox"/> 
      <label for="opt22">green</label> 
    </div>`; 
  $('.new').html(data); 
} 
 
$('button').on('click', generateNew) 
 
$('.step :checkbox').on('click', function() { 
  alert('Чекбокс нажат') 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="step"> 
  <input id="opt21" type="checkbox" /> 
  <label for="opt21">red</label> 
  <input id="opt22" type="checkbox" /> 
  <label for="opt22">green</label> 
</div> 
<button>Новые чекбоксы</button> 
<div class="new"></div>

Вот этот скрипт срабатывает на чекбоксы, которые были как html, но не срабатывает на сгенерированные вследствие нажатия button. Есть ли способ это обойти?

jsFiddle

Answer 1

Ответ @teran рабочий, так что дубликат.

Из ответа по ссылке выше:

function generateNew() { 
  var data = `<div class="step">  
     <input id="opt21" type="checkbox"/> 
      <label for="opt21">red</label> 
      <input id="opt22" type="checkbox"/> 
      <label for="opt22">green</label> 
    </div>`; 
  $('.new').html(data); 
} 
 
$('button').on('click', generateNew) 
 
$(document).on('click', '.step :checkbox', function() { 
  alert('Чекбокс нажат') 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="step"> 
  <input id="opt21" type="checkbox" /> 
  <label for="opt21">red</label> 
  <input id="opt22" type="checkbox" /> 
  <label for="opt22">green</label> 
</div> 
<button>Новые чекбоксы</button> 
<div class="new"></div>