dongmou9260 2019-05-21 13:30
浏览 135
已采纳

添加新行后,select2无法正常工作

I added new row in table by jquery, then select2 is not working

// Javascript

$("#add").click(function () {

    $("#mytable").each(function () {

        var tds = '<tr>';

        jQuery.each($('tr:last td', this), function () {

            tds += '<td>' + $(this).html() +'</td>';

        });
        tds += '</tr>';

        if ($('tbody', this).length > 0) {

            $('tbody', this).append(tds);
        } else {

            $(this).append(tds);
        }

    });
});

//Html

<form method="POST" action="/store">

        {{ csrf_field() }}

        <h2>Invoice</h2>

        <div>

            <!-- Customer job-->

            <div class="form-group job">

            Customer job:
            <select class="customer_job" name="customer_job">

                @if(count($customers)>1)

                    @foreach($customers as $customer)

                        <option>{{$customer ->job}}</option>  

                    @endforeach


                @else 
                    <p>No posts found</p>

                @endif

            </select>

            </div>

            <!--Date-->

            <div class="form-group date">

            Date:
            <input type="date" name="date">   

            </div>

        </div>

        <br><br>
        <table id="mytable">

                <tr>
                  <th>ITEM</th>
                  <th>DESCRIPTION</th>
                  <th>QUANTITY</th>
                  <th>RATE</th>
                  <th>AMOUNT</th>
                </tr>

                <tr>
                  <td>
                        <select class="item" name="item">

                                @if(count($items)>1)
                                @foreach($items as $item)
                                    <option>{{$item ->item_name}}</option>  
                                @endforeach
                            @endif
                        </select>
                  </td>
                  <td>
                      <input type="text" name="description">
                  </td>
                  <td>
                      <input type="number" name="quantity" id="quantity" step="1">
                  </td>
                  <td>
                        <select class="rate" name="rate" id="rate">
                                @if(count($items)>1)
                                @foreach($items as $item)
                                    <option>{{$item ->rate}}</option>  
                                @endforeach
                            @endif
                        </select>
                  </td>
                  <td><input type="number" name="amount" id="amount" readonly /></td>
                </tr>
        </table><br>
        <input type="submit" value="Save" class="submit">
        <input type="button" value="Add" id="add" class="btn-primary add">
        </form>
  • 写回答

1条回答 默认 最新

  • dtysql0586 2019-05-21 14:33
    关注

    Change your js code with this code

    var j =2;
    
        $("#add").on('click', function () {
    
        var data = '<tr><td><select class="item" name="item">@if(count($items)>1)@foreach($items as $item)<option>{{$item ->item_name}}</option>  @endforeach @endif</select></td><td> <input type="text" name="description"></td> <td> <input type="number" name="quantity" id="quantity" step="1"> </td> <td> <select class="rate" name="rate" id="rate"> @if(count($items)>1) @foreach($items as $item)  <option>{{$item ->rate}}</option>    @endforeach @endif</select></td><td><input type="number" name="amount" id="amount" readonly />&nbsp; <a href="javascript:void(0);" class="remCF" style="width:auto;font-size:28px;margin-left:1vw;color:#f33102;padding-top:6px;display:inline-block;"><i class="fa fa-times-circle"></i></a></td></tr>';
    
    
        $('#mytable tr:last').after(data);
    
        j++;
        $(".remCF").on('click', function () {
        $(this).parent().parent().remove();
        });
    
    });
    

    I hope it works

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题