目的地

目的地

关注
发信
关注(28)粉丝(399)

javascript - 转移到新目的地时未捕获jQuery事件值

这是原始形式

<form action="#" method="POST" id="cart_form">
    <table class='header_tbl' style="background:none !important;">
        <thead>
            <tr>
                <th>Item Name</th>
                <th>Unit Price</th>
                <th>Qty</th>
                <th>Amount(RM)</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <td>Total</td>
                <td></td>
                <td><span class='qty_1'></span><input type='hidden' name='total_qty' value=''></td>
                <td><span class='total'></span><input type='hidden' name='total' value=''></td>
                <td></td>
            </tr>
            <!--membership-->
            <tr id="membership" class="no_show">
                <td><span class="mem_1"></span></td>
                <td></td>
                <td><span class="mem_2"></span></td>
                <td><span class="mem_3"></span><input type='hidden' name='mem' value='10'><br/><input type='hidden' name='email_2' value=''><input type='hidden' name='ic_add' value=''></td>
                <td></td>
            </tr>
            <tr id="comm" class="no_show">
                <td>Commision (x%)</td>
                <td></td>
                <td></td>
                <td><span class='comm'><?php echo $discount;?></span>%<input type='hidden' name='comm' value='<?php echo $discount;?>'></td>
                <td></td>
            </tr>
            <tr class="no_show">
                <td>Total Payment</td>
                <td></td>
                <td></td>
                <td><span class='grand'></span><input type='hidden' name='grand' value=''></td>
                <td></td>
            </tr>
            <tr id='add_here'>
            </tr>
            <!--cust info starts-->
            <tr class="no_show">
                <td colspan="3"><input type='hidden' name='cust_id' id='cust_id' value=''><br/><input type='hidden' name='cust_email' id='cust_email' value=''></td>
                <td></td>
            </tr>
            <tr class="no_show">
                <td colspan="3"><input type='hidden' name='cust_name' id='cust_name' value=''></td>
                <td></td>
            </tr>
            <!--membership-->
            <tr>
                <td colspan="4"><input type='hidden' name='mem_id' value='<?php echo $membership;?>'></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="4"><input type='hidden' name='mem_name' value='<?php echo $username;?>'></td>
                <td></td>
            </tr>
            <!--membership ends-->
            <!--cust info ends-->
            <!--membership ends-->
            <tr id="replace_this">
                <td></td>
                <td class="cancel"><input type="button" name='cancel' id="cancel" value="CANCEL"/></td>
                <td class="cash"><input type="submit" name='submit' id="cash" value="CASH"/></td>
                <td class="checkout"><input type="button" name='checkout' id="checkout" value="CHECK OUT"/></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</form>


通过jQuery附加<tbody></tbody>之间的所有行

我将整个表单转移到新的目的地，如下所示：

$('#left_col #cart_form2').html($('#cart_form').html());


新表单的目的地具有以下结构：

<div class='small-12 medium-6 large-6 columns' id='left_col'>

       <div class="container">
         <form action="#" method="POST" id="cart_form2"> </form>
      </div>
</div>


转移到新目的地后的输出为：

javascript - 转移到新目的地时未捕获jQuery事件值-LMLPHP

文本框中的值在新目的地中为空。转移时如何获取这些值？我尝试了克隆，但这对我来说不起作用。

编辑：

 console.log("cart= "+$('#cart_form').html());

<table class="header_tbl" style="background:none !important;">

<thead>
    <tr>
        <th>Item Name</th>
        <th>Unit Price</th>
        <th>Qty</th>
        <th>Amount(RM)</th>
        <th></th>
    </tr>
</thead>

    <tbody><tr id="2"><th class="product">Slimming Tea<input type="hidden" name="catalog_name[]" value="Slimming Tea"></th><td class="price">RM <span class="pp_2">25</span><input type="hidden" id="2_price[]" name="price[]" value="25" class="price2"></td><td class="qty_2"><input type="text" name="qty" style="width:50px;height:20px;margin:10px auto;" value="" onchange="subTotal2(&quot;2&quot;)"><input type="hidden" id="2_qty2[]" name="qty2[]" value=""><span class="show_2"></span></td><td class="sub_total">25</td><td><img src="http://emall.3pteb.my/pos_system/img/del.png" style="width:15px;cursor:pointer;" onclick="del_this(&quot;2&quot;)"></td></tr><tr id="4"><th class="product">Karipap Pusing Ayu<input type="hidden" name="catalog_name[]" value="Karipap Pusing Ayu"></th><td class="price">RM <span class="pp_4">8</span><input type="hidden" id="4_price[]" name="price[]" value="8" class="price2"></td><td class="qty_4"><input type="text" name="qty" style="width:50px;height:20px;margin:10px auto;" value="" onchange="subTotal2(&quot;4&quot;)"><input type="hidden" id="4_qty2[]" name="qty2[]" value=""><span class="show_4"></span></td><td class="sub_total">16</td><td><img src="http://emall.3pteb.my/pos_system/img/del.png" style="width:15px;cursor:pointer;" onclick="del_this(&quot;4&quot;)"></td></tr>
    </tbody>
    <tfoot>

    <tr>
    <td>Total</td><td></td><td><span class="qty_1">3</span><input type="hidden" name="total_qty" value=""></td><td><span class="total">41</span><input type="hidden" name="total" value="41"></td><td></td>
    </tr>
    <!--membership-->
     <tr id="membership" class="no_show">
    <td><span class="mem_1"></span></td><td></td><td><span class="mem_2"></span></td><td><span class="mem_3"></span><input type="hidden" name="mem" value="10"><br><input type="hidden" name="email_2" value=""><input type="hidden" name="ic_add" value=""></td><td></td>
      </tr>

      <tr id="comm" class="no_show">
    <td>Commision (x%)</td><td></td><td></td><td><span class="comm">20</span>%<input type="hidden" name="comm" value="20"></td><td></td>
    </tr>
     <tr class="no_show">
    <td>Total Payment</td><td></td><td></td><td><span class="grand">41</span><input type="hidden" name="grand" value="41"></td><td></td>
    </tr>
   <tr id="add_here">
   </tr>
    <!--cust info starts-->
  <tr class="no_show">
    <td colspan="3"><input type="hidden" name="cust_id" id="cust_id" value=""><br><input type="hidden" name="cust_email" id="cust_email" value=""></td><td></td>
    </tr>
    <tr class="no_show">
    <td colspan="3"><input type="hidden" name="cust_name" id="cust_name" value=""></td><td></td>
    </tr>
     <!--membership-->
   <tr>
    <td colspan="4"><input type="hidden" name="mem_id" value="123"></td><td></td>
      </tr>
      <tr>
    <td colspan="4"><input type="hidden" name="mem_name" value="QIZLAF MARKETING"></td><td></td>
      </tr>
    <!--membership ends-->
    <!--cust info ends-->
    <!--membership ends-->
    <tr id="replace_this">
    <td></td>
    <td class="cancel"><input type="button" name="cancel" id="cancel" value="CANCEL"></td>
    <td class="cash"><input type="submit" name="submit" id="cash" value="CASH"></td>
    <td class="checkout"><input type="button" name="checkout" id="checkout" value="CHECK OUT"></td>
    <td></td>
    </tr>
    </tfoot>



</table>

最佳答案

应该这样做，获取相关的:input值并将其设置为新值：

$('#left_col #cart_form2').html($('#cart_form').html()).find(':input').val(function(i){
     return $('#cart_form').find(':input').eq(i).val();
}).end().find('[id]').attr('id', function(_, id){ return id + "_2"});


但这看起来非常昂贵...

要在子元素上保留绑定的事件/数据，应使用：

$('#cart_form').clone(true).replaceAll('#left_col #cart_form2').attr('id', 'cart_form2').find(':input').val(function(i) {
  return $('#cart_form').find(':input').eq(i).val();
}).end().find('[id]').attr('id', function(_, id) {
  return id + "_2"
});

08-19 01:07
Powered by LMLPHP ©2024 目的地 0.043295