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!");
});

所以这个工作正常，但如果我动态添加anohter文本框，那么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!");
});

在动态框上设置模糊事件

2 个答案: