jQuery的：追加的元素來動態地生成的元素

我有以下動態生成的HTML - 我看到這個HTML代碼中螢火但不是當我右擊並查看頁面源jQuery的：追加的元素來動態地生成的元素

 <table id="list2" class="ui-jqgrid-btable" cellspacing="0" cellpadding="0" border="0" tabindex="1" role="grid" aria-multiselectable="true" aria-labelledby="gbox_list2" style="width: 1405px;"> 

<tr id="1" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1"> 
<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell"> 
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif"> 
     </td> 
</tr> 
<tr id="2" class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1"> 
<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell"> 
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif"> 
     </td> 
</tr> 
</table>

考慮上述代碼，我想img元素後動態添加div元素，使得每一個錶行具有以下代碼

<td aria-describedby="list2_action" title="" style="text-align:center;" role="gridcell"> 
    <img height="22" width="22" alt="Edit" title="Edit" style="vertical-align:middle" src="images/action_icon.gif"> 
<div>test</div> 
     </td>

我試過.append()， .add()，.insertAfter()但沒有任何效果。

請幫忙！沒有事件處理程序，有沒有辦法使用.live()？

這也不起作用，它在身體結束標記之前的右下角。

$(document).ready(function(){ 
    $("img[alt='Edit']").after("<div style='background-color:yellow;'>test</div>"); 

});

來源

2011-10-21 techlead

如何生成原始HTML？你的代碼是否已經有一些對這些元素的引用？什麼會觸發添加額外的div你想添加？你最後一句關於'.live（）'的問題與這個問題的其餘部分有什麼關係？（沒有事件處理程序，使用'.live（）'會有什麼意義？） – nnnnnn

原始的html是使用jquery生成的，但我無法觸及那段代碼。我必須編寫新的代碼來添加div元素。 – techlead

既然你說你不能觸摸動態創建標記的原始代碼，那麼看起來你最好是「monkey patch」原始代碼來修改它，以便在它正常運行後，它也會調用你的添加div的代碼。

這並不理想，但由於您不能使用.live()綁定到特定類型的元素創建時，它可能是您最好的選擇。

看到我的jsfiddle使用幾乎你確切的標記工作的例子：http://jsfiddle.net/greglockwood/9xmqE/

問題的癥結所在是此Javascript：

// assume that this is the code you cannot touch that dynamically adds the rows: 

function existingAddDynamicRows() { 
    // ... omitted for brevity ... 
} 

// now, in our code, we want to "monkey patch" the old code's function so that we can call our own code after it 

// first we store a ref to the existing function 
var oldAddDynamicRows = existingAddDynamicRows; 
// next, we redefine what the function does to also run our own code 
existingAddDynamicRows = function() { 
    oldAddDynamicRows(); // call the existing code to add the rows 
    // now we can run our own code, like adding the <div>s in 
    $('#list2 td img').after('<div>test</div>'); 
}; 

// now whenever that existing function gets run, it will also run our code as well 
// e.g. 
existingAddDynamicRows();

讓我知道如果您有任何問題。根據現有代碼的結構，猴子修補它的具體方式可能會有所不同。

來源

2011-10-21 03:56:19 GregL

你想用after：

插入內容，由參數指定，在匹配的元素集合中的每個元素之後。

喜歡的東西：

$('td img').after('<div>test</div>');

演示：http://jsfiddle.net/ambiguous/Lt6ku/

您可能需要調整td img選擇，以配合您當然HTML。

來源

2011-10-21 02:30:51

它不工作:( – techlead

@ SK11：生成的HTML真的是什麼樣子？適用於我：http：// jsfiddle。net/ambiguous/HJDwn/ –

我編輯了原始html – techlead

jQuery的：追加的元素來動態地生成的元素

回答

相關問題