在动态框上设置模糊事件

Question

我有一个页面，用户可以在其中动态添加文本输入框。即使用户离开此输入框，我也想触发。这在只有一个框的初始页面刷新时看起来不错。在这种情况下，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>

...而我的 js 是...

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

所以这可以正常工作，但是如果我动态添加另一个文本框，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 事件“更新”？

Answer 1

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

Answer 2

试试这个：

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