極其奇怪的jQuery bug或者我只是愚蠢？

Question

我已經使用jQuery一個月了，我只有幾個小問題，但現在我有一個非常大的問題。問題在於jQuery不會將CSS添加到附加輸入中。我也創建示範http://jsfiddle.net/heY2u/

HTML：

<div id='container'></div> 
<input type="text" value="Test1"> 

JS：

$('input, textarea, select').on('focusin', function() { 
    $(this).data('holder', $(this).attr('placeholder')); 
    $(this).attr('placeholder', ''); 
    $(this).css('outline', '#F78181 solid 1px'); 
}); 

$('input, textarea, select').on('focusout', function() { 
    $(this).attr('placeholder', $(this).data('holder')); 
    $(this).css('outline', ''); 
}); 

$('<input type = "text" value = "Test2">').appendTo('#container'); 

alert(123); 

Answer 1

你需要把行：

$('<input type = "text" value = "Test2">').appendTo('#container'); 

你的其他的jQuery前

。它失敗了，因爲您使用的語法只會將代碼應用於DOM中的元素。因此，您需要先將元素添加到DOM，然後應用其他代碼。

jsFiddle example

或者使用。對（）的代表團語法，如：

$(document).on('focusin', 'input, textarea, select', function() { 

這將讓你的事件綁定到DOM已經的任何元素，任何元素你稍後動態添加。

從docs：

的事件處理程序僅結合到當前選擇的元素;在代碼調用.on（）時，頁面上必須存在 。 要確保元素存在並且可以選擇，請在頁面上的HTML標記中的 HTML標記中對元素執行文檔就緒處理程序內的事件 綁定。如果新頁面被注入頁面， 選擇元素並附加事件處理程序，當新的HTML被放置到頁面中時，頁面中的內容爲 。

jsFiddle example