2

我正在使用 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>
4

2 回答 2

0

试试这个：

copyItem.find('.command').parent().html(command.html());
于 2012-12-12T23:15:29.280 回答
0

代替

.replaceWith(command);

你可以做

.html(command.html());
于 2012-12-12T23:16:20.217 回答