jquery創建跨度，然後將函數應用於它們

Question

我在jQuery中創建表單。當頁面加載時，我隱藏所有文本框並嘗試用跨度替換它們。

$("form input:text").each(function(index) { 
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span").hide(); 
}); 

此經過的每個文本輸入放置一個跨度文本框後，用ID一樣的文本框，但「span_」 appened到開始..

現在我想在跨應用懸停：$（「span」）。hover

我想我可以在每個內部做或嘗試後應用它（當所有已創建），但我不知道如何去它得到它的工作

Answer 1

你可以這樣改了一下週圍：

$("form input:text").each(function(index) { 
    $("<span />", { "id": 'Span_' + this.id, text: $(this).val() }) 
    .insertAfter(this) 
    .hover(function() { 
     //do something 
    }); 
    $(this).hide(); 
}); 

這使用$(html, props)創建對象，而不是.after()使用.insertAfter()，這樣，你的鏈是指創建的元素，所以你可以做無論你想要直接。

Answer 2

既然你只是隱藏它們，而不是將它們分開，這應該可以做到這一點：

$("form input:text").each(function(index) { 
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span>").hide(); 
}); 
$("form input:text+span").hover(...); 

另一種方法是使用$(this).next().hover()循環內，添加元素，像這樣經過：

$("form input:text").each(function(index) { 
    $(this).after("<span id='Span_" + $(this).attr("id") + "'>" + $(this).val() + "</span>").hide().next().hover(...); 
}); 

這可能是一個更好的解決方案，因爲你能單獨綁定的事件。如果你不需要單獨綁定，它會增加不必要的計算。