Question

我有以下代码

$('.plus_sign').click(function() {
        $(".country").append(`<div>
                <select name="" id="">
                    <option value="">sdfasfdasd</option>
                    <option value="">sdfasfdasd</option>
                    <option value="">sdfasfdasd</option>
                    <option value="">sdfasfdasd</option>
                </select>
                <input type="text">
                <i class="fa fa-plus plus_sign"></i>
            </div>`);
    });

当我点击plus_sign时，我会附加HTML。但只有第一个加号才有效。附加加号无效。

Answer 1

您的初始事件处理程序仅适用于DOM中已存在的.plus_sign。如果您动态添加它们，则必须在添加它们时向其添加新的事件处理程序。或者假设.country是硬编码的，您可以将.on与选择器一起使用：

$('.country').on('click', '.plus_sign', function() {
  $(this).append(`<div>
    <select name="" id="">
      <option value="">sdfasfdasd</option>
      <option value="">sdfasfdasd</option>
      <option value="">sdfasfdasd</option>
      <option value="">sdfasfdasd</option>
    </select>
    <input type="text">
    <i class="fa fa-plus plus_sign"></i>
  </div>`);
});

http://api.jquery.com/on/

递归使用jQuery .append（）

1 个答案: