jQueryの：私は、次の動的に生成されたHTMLを持っている要素を動的に生成するための要素

Question

を追加は - 私は放火犯で、このhtmlコードを参照してくださいではなく、私は右クリックしたときに、ビューのページのソース以上を取る

 <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> 

コードは、私は、動的に私が.append()を試したすべてのテーブルの行には、次のコード

<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> 

を有するようにimg要素の後にdiv要素を追加したいです.add()、.insertAfter()ですが、何も機能しません。

Plsヘルプ！イベントハンドラなしで.live()を使用する方法はありますか？

これも機能しません。ボディの終了タグの右下に表示されます。

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

}); 

Answer 1

マークアップを動的に作成する元のコードに触れることはできないと言われたので、元のコードを変更するのが最も良いと思われます。 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(); 

は、ご質問があれば私に教えてください。モンキーパッチは、既存のコードがどのように構造化されているかによって異なる場合があります。

Answer 2

あなたはafter使用したい：マッチした要素の集合内の各要素の後に、パラメータで指定された

挿入コンテンツを、。以下のような

何か：

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

デモ：http://jsfiddle.net/ambiguous/Lt6ku/

あなたはもちろん、あなたのHTMLに一致するようにtd imgセレクタを調整する必要があります。