主页 / 问题 / 1044474
Accepted
Natalya
Asked:2020-11-10 19:52:57 +0000 UTC2020-11-10 19:52:57 +0000 UTC

脚本不适用于使用 .html() 生成的块

  • 772

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 的复选框，但不适用于通过单击按钮生成的复选框。有没有解决的办法？

jsFiddle

html

1 个回答

  1. Best Answer

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

    • 1

相关问题