Question

我正在使用jquery 1.7.2

我有一个jQuery对象copyItem，其中一部分内容包含以下html

<tr>            
    <td class="command" style="" colspan="3">
        <input type="button" class="insertCommand" value="Add">
    </td>        
</tr>

不太复杂。

我也有一些模板html ......

<table id="itemCommandTemplate">
    <tr>
        <td class="command" style="" colspan="3"><input type="button" class="editCommand" value="Edit"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="deleteCommand">delete</a></td>
        <td class="command" style="display: none" colspan="3"><input type="button" class="saveCommand" value="Save"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="cancelCommand">cancel</a></td>
    </tr>
</table>

...我正在使用以下jQuery进行克隆

var command = $('#itemCommandTemplate tr').clone(true, true);

如果我写出命令的html，则所有内容都按顺序显示。

然后我尝试使用

将copyItem中的原始html替换为此克隆副本

copyItem.find('.command').parent('tr').replaceWith(command);

此次通话后，结果是两份

<tr>
    <td class="command" style="" colspan="3"><input type="button" class="editCommand" value="Edit"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="deleteCommand">delete</a></td>
    <td class="command" style="display: none" colspan="3"><input type="button" class="saveCommand" value="Save"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="cancelCommand">cancel</a></td>
    <td class="command" style="" colspan="3"><input type="button" class="editCommand" value="Edit"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="deleteCommand">delete</a></td>
    <td class="command" style="display: none" colspan="3"><input type="button" class="saveCommand" value="Save"/>&nbsp;&nbsp;<a href="javascript:void(0);" class="cancelCommand">cancel</a></td>
</tr>

我想也许.find正在返回两个对象，但生成的html是正确的，除了插入的两个节点。似乎无法弄明白。如果我只是替换html，一切看起来都很好，但我也想要附加事件。

任何线索？

修改

添加copyItem

的完整内容

<table>
    <tbody>
        <tr>
            <td style="width: 200px">company:</td>
            <td style="width: 100px">campaigns:</td>
            <td style="width: 300px"></td>
        </tr>
        <tr>
            <td class="companyName">$5 Dinners</td>
            <td>
                <select class="roleTypeList">
                    <option value="1000">All</option>
                    <option value="1001">Limited</option>
                </select>
            </td>
            <td rowspan="3" style="text-align: right">
                <input id="zzz" name="zzz" type="hidden" value="insert">
                <div id="zzz" style="">
                    <select size="4" name="zzz" multiple="multiple" id="zzz" class="campaignList" style="width:300px;">
                    </select>
                </div>            
            </td>        
        </tr>          
        <tr>
            <td colspan="2">reports:</td>
        </tr>
        <tr> 
            <td colspan="2">
                <input type="checkbox" value="1004" id="PinRptAdd">
                <label for="PinRptAdd">Pin Report</label>
                <input type="checkbox" value="1009" id="CpcAdd">
                <label for="CpcAdd">CPC</label>
                <input type="checkbox" value="1010" id="CpaAdd">
                <label for="CpaAdd">CPA</label>
                <input type="checkbox" value="1011" id="S2cAdd">
                <label for="S2cAdd">S2C</label>                                            
                <input type="checkbox" value="1003" id="LiveDetailsAdd" style="">
                <label for="LiveDetailsAdd" style="">Live Details</label>
            </td>
        </tr>
        <tr>
            <td class="command" style="" colspan="3">
                  <input type="button" class="insertCommand" value="Add">
            </td>        
         </tr>    
    </tbody>
</table>

Answer 1

试试这个：

copyItem.find('.command').parent().html(command.html());

Answer 2

而不是

.replaceWith(command);

你可以做到

.html(command.html());

jQuery ReplaceWith添加两个克隆节点副本

2 个答案: