可以在將來動態添加元素之前添加div嗎？

Question

我有一個拖放元素設施。我想在任何元素放到頁面之前添加一個div。可能嗎 ？ 我試圖用活，但它添加的數字div是奇怪的。第一次，它增加了一兩次和第二次。它增加了兩個以上。 我想這一點：

$('#PageContent > .textElementClass').live('dblclick', function(e) { 
ElementWidth=$(e.target).width(); 
targetElement=$(e.target); 
$(e.target).css({'display':'none'}); 
$(e.target).before('<div id="TextValue" style="'+ElementWidth+'"><textarea cols="50" rows="10">Edit Content</textarea><input type="button" value="Save" class="SaveContent"></div>'); 

$('.SaveContent').live('click', function(e){ 
firstChild=$('#TextValue > textarea').html(); 
$(targetElement).html(firstChild); 
$(targetElement).css({'display':'block'}); 
$('#TextValue').remove(); 
}); 
    }); 

Answer 1

您在這裏需要一些變化，首先是ID不能在一個頁面中多次使用，所以如果你動態添加的東西，它不應該包括相同的ID就像你有這樣的：

<div id="TextValue"> 

但是，你並不需要一個ID，你可以簡單地解僱<textarea>這是在<div>您點擊使用tree-traversal找到它相對於你點擊了什麼，像這樣：

$(this).siblings("textarea").val(); 

這也使用.val()來獲得值，使用此代替.html()。此外，您可以使用.show()和.hide()而不是手動設置.css()。

當你設置風格時，它的結尾爲style="40"，這是無效的/沒有效果... <div>應伸展到適當的寬度，所以我刪除了這一塊。如果需要，可以通過.width(valueToSet)將其添加回去。

最後，您可以在.live()處理器使用this和你.live('click',...)應該外您.live('dblclick',...)，否則它添加額外保存單擊處理程序每​​次添加一個元素，從而導致額外的保存和刪除每個時間。

總體而言，它應該看起來更像是這樣的：

$('#PageContent > .textElementClass').live('dblclick', function() { 
    targetElement = $(this).hide() 
         .before('<div><textarea cols="50" rows="10">Edit Content</textarea><input type="button" value="Save" class="SaveContent"></div>'); 
}); 
$('.SaveContent').live('click', function(){ 
    var ta = $(this).siblings("textarea").remove(); 
    $(targetElement).html(ta.val()).show(); 
});