Question

$(document).ready(function () {

   $('.add-button').on('click', function () {
  
      $('.alert-button').after('<button type="button" class="alert-button">Click me! </button><br>');
  
  });
  

  $('.alert-button').on('click', function () {
  
    alert('HI!');
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class="alert-button">Click me! </button><br>
<button type="button" class="add-button">Add button!</button>

嗨！我的“$（'。alert-button'）。on（'click'...”代码适用于在页面加载时创建的元素，但不适用于在dinamically创建的元素。

所以我有一个带2个按钮的页面（请运行上面的代码片段）。如果你点击“点击我！”提醒“嗨！”出现。

但是当我复制“点击我！”时通过按“添加按钮”按钮，点击复制的“点击我！”没有警告“嗨！” （虽然它也有“.alert-button”类）。

我想看到警报“嗨！”当我点击任何“点击我！”按钮。

我做错了什么？：）

Answer 1

只需替换此功能：

$(document).on('click','.alert-button', function () {

    alert('HI!');

});

这也将绑定动态添加元素上的click事件。

Answer 2

点击处理程序仅绑定到已存在的元素。在动态创建元素时，您需要向元素添加处理程序。在您的情况下，最好的位置是在创建新元素后的.on函数中。

动态创建元素的事件处理程序？

2 个答案: