我試圖生成一個html代碼塊,當我點擊一個鏈接。我在頁面上有幾次相同的鏈接「回覆」。但我想在點擊鏈接下生成代碼。我嘗試使用$(this),但它沒有奏效。謝謝你的幫助!如果有更好的解決方案,請告訴我。另外作爲參考,我試圖創建一個答覆textarea就像在YouTube上,當你點擊回覆鏈接時,它會打開一個textarea供用戶輸入文本。jQuery:添加html塊到最近點擊鏈接
的示例代碼可以在這裏Sample Code
我試圖生成一個html代碼塊,當我點擊一個鏈接。我在頁面上有幾次相同的鏈接「回覆」。但我想在點擊鏈接下生成代碼。我嘗試使用$(this),但它沒有奏效。謝謝你的幫助!如果有更好的解決方案,請告訴我。另外作爲參考,我試圖創建一個答覆textarea就像在YouTube上,當你點擊回覆鏈接時,它會打開一個textarea供用戶輸入文本。jQuery:添加html塊到最近點擊鏈接
的示例代碼可以在這裏Sample Code
$(".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();
謝謝羊駝!這工作!並感謝您解釋您如何解決問題的方法!我有另一個問題?我可以添加功能到新生成的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
的情況下,它前面加上)
這個怎麼樣?甚至可以考慮使用數據(),而不是在href,但它的工作原理:
你有庫在您的提琴代碼設置爲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