Javascript 在动态框上设置模糊事件

我有一个页面，用户可以在其中动态添加文本输入框。我想在用户离开此输入框时触发一个。在只有一个框的初始页面刷新中，这看起来是正常的。在这种情况下，DOM看起来像

<div id="controls">
<div class="tag" data-tag="1">
<input id="tags_" class="word" type="text" name="tags[]" data-tag="1">
<input id="weights_" class="weight" type="hidden" name="weights[]" data-tag="1" value="90">
<div class="slider slider-1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<a class="add-word" href="1" data-tag="1">+</a>
</div>
</div>

所以这是可行的，但是如果我动态添加另一个文本框，DOM就会变成

<div id="controls">
<div class="tag" data-tag="1">
<input id="tags_" class="word" type="text" name="tags[]" data-tag="1">
<input id="weights_" class="weight" type="hidden" name="weights[]" data-tag="1" value="90">
<div class="slider slider-1 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 80%;"></a>
</div>
<a class="remove-word" href="#" data-tag="1">-</a>
</div>
<div class="tag" data-tag="2">
<input class="word" type="text" name="tags[]">
<input class="weight" type="hidden" value="50" name="weights[]">
<div class="slider slider-2 ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<a class="add-word" href="1" data-tag="2">+</a>
</div>
</div>

但是，模糊事件仍会在第一个文本框上触发。当我添加一个新框时，如何让我的js事件“更新”？

试试以下方法：

$(document).on('blur', '.word', function(){
  alert("wintas!");
});

$('.word').on('blur',function(){
  alert("wintas!");
});

---

对于后代来说，我使用的代码可能是$（'#controls'）。on（'blur'，'.word'，function（）{alert（“wintas！”）；}）；

$('.word').on('blur',function(){
  alert("wintas!");
});