2

私はjquery 1.7.2を使用しています

copyItemコンテンツのサブセットに次のhtmlが含まれるjQueryオブジェクトがあります

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

この呼び出しの後、結果は 2 つのコピーになります

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

おそらく2つのオブジェクトが返されていると思いました.findが、挿入された2つのノードを除いて、結果の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 に答える