javascript - 将函数分配给动态添加的 HTML

Question

我正在尝试使用 jQuery 和 JavaScript 编写一些代码来设置一个或多个小部件。该小部件接受 input 中的文本，并在单击 button 时将其添加到 ul 中。

然后项目被添加到ul，点击监听器是一个在点击时删除特定项目的设置。

代码如下所示:

    function WidgetThing(className) {
    	
      var items = [];
      
      function removeItem(e) {
        var idx = parseInt($(e.target).attr('data-index'));
        items.splice(idx, 1);
        updateItems();
      }
    
    	function updateItems() {
      	var ul = $('.' + className + ' .items ul');
        ul.html('');
      	items.forEach(function(item, idx) {
        	ul.append('<li data-index="' + idx + '">' + item + '</li>');
        });
        ul.on('click', 'li', removeItem);
      }
    
      $('.' + className + ' .add-button').click(function(e) {
      	var input = $('.' + className + ' input');
      	items.push(input.val());
        input.val('');
        updateItems();
      });
    
    }
    
    $(document).ready(function() {
    	WidgetThing('widget1');
      WidgetThing('widget2');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Widget1
    <div class="widget1">
      <div class="controls">
        <input type="text" />
        <button class='add-button'>Add Item</button>
      </div>
    
      <div class="items">
        <ul></ul>
      </div>
    </div>
    
    Widget2
    <div class="widget2">
      <div class="controls">
        <input type="text" />
        <button class='add-button'>Add Item</button>
      </div>
    
      <div class="items">
        <ul></ul>
      </div>
    </div>

这对于添加项目来说效果很好。

但是，如果我单击该项目将其删除，它也会删除所选项目下方的所有项目。

我怎样才能让这个代码工作？我采取了错误的方法吗？

更新说明:在实际应用中，我的 updateItems() 函数有一些副作用，因此我需要采用这种方法从数组中删除项目。

Answer 1

<强> Working fiddle 。

这可以用比这更少的代码来实现，您可以将两个事件附加到按钮，另一个附加到用于删除的 li 元素:

$(document).ready(function() {
  $('.add-button').click(function() {
    var items = $(this).closest('.controls').next('.items');
    $('ul', items).append('<li>' + $(this).prev('input').val() + '</li>');
  });

  $('ul').on('click', 'li', function() {
    $(this).remove();
  });
});

这是一个工作片段:

$(document).ready(function() {
  $('.add-button').click(function() {
    var items = $(this).closest('.controls').next('.items');
    $('ul', items).append('<li>' + $(this).prev('input').val() + '</li>');
  });

  $('ul').on('click', 'li', function() {
    $(this).remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Widget1
<div class="widget1">
  <div class="controls">
    <input type="text" />
    <button class='add-button'>Add Item</button>
  </div>

  <div class="items">
    <ul></ul>
  </div>
</div>

Widget2
<div class="widget2">
  <div class="controls">
    <input type="text" />
    <button class='add-button'>Add Item</button>
  </div>

  <div class="items">
    <ul></ul>
  </div>
</div>