爲什麼模糊和焦點不適用於附加輸入文本字段？

Question

ers。任何人都可以向我解釋爲什麼模糊和焦點事件不適用於附加的輸入文本框？

正如你所見，在這JSFIDDLE。在html中創建的輸入字段似乎傾聽模糊和焦點事件。 但是，當您使用追加按鈕追加輸入文本字段時，突然輸入文本字段不會聽取模糊/焦點事件。

HTML

<input class="input" value="value 1"> 
<input class="input" value="value 2"> 
<div id="appendinput">Append a input textfield</div> 
<div id="inputcontainer"></div> 

jQuery的

var counter = 0; 

$("#appendinput").click(function() { 
    $('<input class="input" value="value 3" type="text" id="input' + (counter) + '"/>').appendTo('#inputcontainer'); 
    counter++; 
}); 


$('.input').on('focus', function() { 
    thisValue = $(this).val(); 
    $(this).attr("value", ""); 
}); 
$('.input').on('blur', function() { 
    if ($(this).val() === "") { 
     $(this).val(thisValue); 
    } 
}); 

你能向我解釋這是爲什麼不工作了附加的輸入文本框？ 預先感謝您。

Answer 1

您需要使用on將事件委託給動態添加元素的父項。

Live Demo

$(document).on('focus', '.input', function() { 
    thisValue = $(this).val(); 
    $(this).attr("value", ""); 
}); 

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間 後代元素的事件。通過 選擇一個在被授權的事件處理程序附加時保證出現的元素，可以使用委派的事件到 ，避免需要頻繁地附加和刪除事件處理程序 reference。