Question

我有以下动态生成的HTML - 我在firebug中看到这个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>

采取上面的代码，我想在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>");

});

Answer 1

您想使用after：

在匹配元素集合中的每个元素之后插入由参数指定的内容。

类似的东西：

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

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

您可能需要调整td img选择器以匹配您的HTML。

Answer 2

由于您说您无法触及动态创建标记的原始代码，因此您最好“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();

如果您有任何疑问，请与我们联系。根据现有代码的结构，您对其进行修补的特殊方式可能会有所不同。

jQuery：向动态生成的元素追加元素

2 个答案: