jQuery：添加html塊到最近點擊鏈接

我試圖生成一個html代碼塊，當我點擊一個鏈接。我在頁面上有幾次相同的鏈接「回覆」。但我想在點擊鏈接下生成代碼。我嘗試使用$（this），但它沒有奏效。謝謝你的幫助！如果有更好的解決方案，請告訴我。另外作爲參考，我試圖創建一個答覆textarea就像在YouTube上，當你點擊回覆鏈接時，它會打開一個textarea供用戶輸入文本。jQuery：添加html塊到最近點擊鏈接

的示例代碼可以在這裏Sample Code

來源

2012-02-21 Vish

你有庫在您的提琴代碼設置爲mootools的。另外，這看起來不對。 $（「。grid_11 underVideo」），因爲underVideo是一個類。 – Gregg 2012-02-21 21:43:46

即使在jsFiddle上設置了'jQuery'，你的代碼也不能工作。但我認爲'最接近（）'是你正在尋找的東西。另外爲什麼'

'。 – elclanrs 2012-02-21 21:46:31

我注意到你試圖使用'「.grid_11 underVideo」'作爲選擇器。該選擇器正在尋找一個帶'underVideo'標籤的'.grid11'類作爲孩子。我認爲你之後的選擇器將是'「.grid_11.underVideo」' – 2012-02-21 21:54:45

Demo

$(".reply").one('click', function (event) { 
    var html = "<div class='alpha grid_11 underVideo'><ul><li><textarea class='roundedCorners textAreaLabel' rows='4' cols='100' wrap='off' placeholder='Respond to this video...' name='CommentTextArea'></textarea></li></ul></div>"; 
    $(this).parent().after(html); 
    return false; 
});

由於在目標元素上有一個類.reply，我用它代替了.normalText a:last-child。

使用.one代替綁定單擊元素。使用.one只會觸發一次，這將防止添加多個textareas。

$(this)是指點擊的元素，在這種情況下是a.reply元素。使用.parent()將向上移動DOM並選擇是span的父項。當然，.after(html)在span之後插入html。

return false;同時做兩.preventDefault();.stopPropagation();

來源

2012-02-21 21:53:15 shaunsantacruz

謝謝羊駝！這工作！並感謝您解釋您如何解決問題的方法！我有另一個問題？我可以添加功能到新生成的textarea嗎？ – Vish 2012-02-22 15:39:50

嘗試一下本作的JS：

$(".normalText a:last-child").bind('click', function (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
    $(this).parent().before("<div class='alpha grid_11 underVideo'><ul><li><textarea class='roundedCorners textAreaLabel' rows='4' cols='100' wrap='off' placeholder='Respond to this video...' name='CommentTextArea'></textarea></li></ul></div>");  
    });

$(this)將返回當前元素，.parent()將上一級DOM拉昇，所以你可以追加你的HTML （在.before的情況下，它前面加上）

來源

2012-02-21 21:45:35 JKirchartz

有沒有反正我可以添加更多的功能，生成的股利。我的意思是我想將焦點和模糊功能添加到所生成的新文本字段中。 – Vish 2012-02-22 15:31:34

感謝您的幫助！非常感謝您抽出時間回覆我的查詢。您的解決方案可行，但由@alpaca建議的解決方案更加精緻。 – Vish 2012-02-22 15:41:59

這個怎麼樣？甚至可以考慮使用數據（），而不是在href，但它的工作原理：

http://jsfiddle.net/C3NNt/

來源

2012-02-21 21:54:33 Gregg

jQuery：添加html塊到最近點擊鏈接

回答

相關問題