Javascript 如何再次访问jquery函数？

我有一个动态表，可以搜索、分页显示搜索和自动计算字段。 情况是

用户将在搜索框中搜索他/她的项目

如果搜索结果太多而无法显示，系统将分页显示搜索结果

之后，用户可以从搜索结果中进行选择

选择后，系统将生成一个包含所选项目列表的表

表格中有一些文本字段和selectbox。其实它也是一种动态的形式

文本字段由jasvascript自动计算

我的问题是：

当用户搜索其他项目时，分页将无法正常工作。它显示我的数据，但不分页

选择项目后，自动计算将不起作用

我使用Codeigniter作为我的框架。搜索是一个ajax过程。 这是我的密码：

    var counter_code = 1;
    var counter_item = 1;
    var counter_qty = 1;
    var counter_unit = 1;
    var counter_price = 1;
    var counter_total = 1;

   //automatic computation in rows
    $('[id^=qty],[id^=price]').on('change',function() {

        var index = this.id.match(/\d+/)[0];
        var qty = parseInt($('#qty'+index).val());
        var price = parseFloat($('#price'+index).val());
        var disc = $("#discount").val();
        var lessitem = $("#purchase_return").val();
        var total = 0;


        $('#total'+index).val((qty * price ? qty * price : 0).toFixed(2));

        var total = 0;
        $('[id^=total]').each(function(index){
            total+=parseFloat($(this).val()?$(this).val():0);
        });

        var totalAll = $('#sum_of_total').val(total.toFixed(2));

        var vatable = 0;
        var vatable_amt = 0;
        var totalVat = 0;
        var computeDisc = 0;
        var computeLess =0;

        if($("#tin_number").val().length != 0){
            vatable = total / 1.12;
            vatable_amt = vatable * 0.12;
            totalVat = vatable + vatable_amt;

        }else{
            totalVat = total;


        }

        $('#vatable').val(vatable.toFixed(2)); 
        $("#vatable_amount").val(vatable_amt.toFixed(2));
        var gtotal = $("#gtotal").val(totalVat.toFixed(2));
        $("#total_amt_due").val(gtotal.toFixed(2));

    });

    $("#discount").on('change',function(){
        var totalSales = $("#gtotal").val();
        var discountedAmt = $("#discount").val();
        var returnAmt = $("#purchase_return").val();
        var computeTotalDisc = (totalSales - discountedAmt) - returnAmt;
        $("#total_amt_due").val(computeTotalDisc.toFixed(2));
    });

    $("#purchase_return").on('change',function(){
        var totalSalesx = ($("#gtotal").val() - $("#purchase_return").val() - $("#discount").val());
        $("#total_amt_due").val(totalSalesx.toFixed(2));
    });

 $('#search-btn').on('click',function(){

        var query = $("#keyword").val();
        //var query_url = "<?php echo site_url('item_model/searchItem/" + query + "'); ?>";
        var query_url = "<?php echo site_url('item_controller/searchItem'); ?>";

        $.ajax({

            type:'POST',
            url: query_url,
            data:{query: $("#keyword").val()},
            dataType:'json',
            async: false,
            success:function(d){

                //$('.display').dataTable().fnDestroy( true );

                $("#example tbody").html("");

                for(i in d){

                    $("#example tbody").append("<tr><td style='text-align: center; color:' data-code='TRUE'>" + d[i]['code'] + "</td><td style='text-align: left' data-name='TRUE'>" + d[i]['name'] + "</td><td><div style='text-align: center'><input type='button' value='ADD' class='k-button' id='" + d[i]['code'] + "' data-item=TRUE /></div></td></tr>");

                }

                //$("#search_result").show('blind');

                $("[data-item]").on('click',function(){

                    var code = $(this).parents('tr').find('[data-code]').html();
                    var name = $(this).parents('tr').find('[data-name]').html();
                    //console.log(code,name);
                    $("#grid1 tbody").append("<tr><td style='text-align: center; width: 20%'><input type='text' value=" + code + " readonly style='width:50px; background-color: transparent; border-style: none' id=code" + counter_code++ +" /></td><td style='text-align: center; width: 40%'><input type='text' style='width: 90%; background-color: transparent; border-style: none' value='" + name + "' id=item"+ counter_item++ +" readonly /></td><td style='text-align: center'><input type='text' name='qty[]' id=qty"+ counter_qty++ +" style='text-align: center; width: 50px;' /></td><td style='text-align: center'><div align='center'><select style='width:100px; display: block' name='unit[]' id=unit"+ counter_unit++ +" ><option value=''>----</option><option value='pc/pcs'>PC/PCS</option><option value='BOX/BOXES'>BOX/BOXES</option></select></div></td><td style='text-align: center'><input type='text' name='price[]' id=price"+ counter_price++ +" style='text-align: right; width: 100px;' onblur='' /></td><td style='text-align: center'><input type='text' name='total[]' id=total"+ counter_total++ +" style='font-family: courier; text-align: right; background-color: lightgray; color: red; width: 100px;' readonly='readonly' value='' /></td></tr>");

                });

                $('.display').dataTable({
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": false,
                    "bDestroy": true,
                    "bJQueryUI": false,
                    "bRetrieve": true,
                    "sPaginationType": "full_numbers",
                    "iDisplayLength": 25,
                    "destroy": true
                });

            },

        });    

    });

var计数器\u code=1；
var计数器项目=1；
var计数器数量=1；
var计数器_单位=1；
var计数器价格=1；
var计数器_总计=1；
//行自动计算
$（'[id^=qty]，[id^=price]'）。on（'change'，function（）{
var index=this.id.match（/\d+/）[0]；
var qty=parseInt（$（'#qty'+index.val（））；
var price=parseFloat（$（'#price'+index.val（））；
var disc=$（“#折扣”）.val（）；
var lessitem=$（“#购买#退货”）.val（）；
var合计=0；
$（“#总计”+指数）.val（（数量*价格？数量*价格：0）.toFixed（2））；
var合计=0；
$（'[id^=total]'）。每个（函数（索引）{
total+=parseFloat（$（this.val（）？$（this.val（））：0）；
});
var totalAll=$（“#总量之和”）.val（total.toFixed（2））；
var vatable=0；
可变金额=0；
var totalVat=0；
var computeDisc=0；
var computeLess=0；
if（$（“#锡编号”）.val（）.length！=0）{
vatable=总计/1.12；
可增值税金额=可增值税*0.12；
增值税总额=应纳税额+应纳税额；
}否则{
总增值税=总增值税；
}
$（'#vatable'）.val（vatable.toFixed（2））；
美元（“应纳税额”）.val（固定的应纳税额（2））；
增值税总额=$（“#gtotal”）.val（固定增值税总额（2））；
$（“到期总金额”）.val（固定总金额（2））；
});
$（“#折扣”）。在（'change'，function（）上{
var totalSales=$（“#gtotal”）.val（）；
var贴现率=$（“#贴现”）.val（）；
var returnAmt=$（“#购买#退货”）.val（）；
var computeTotalDisc=（总销售额-折扣金额）-退货金额；
美元（“#到期总金额”）.val（计算总金额（2））；
});
$（“#购买#退货”）。在（'change'，function（）上{
var totalSalesx=（$（“#gtotal”）.val（）-$（“#购买#退货”）.val（）-$（“#折扣”）.val（）；
$（“到期总金额”）.val（totalSalesx.toFixed（2））；
});
$（'search btn'）。在（'click'，function（）上{
var query=$（“#关键字”）.val（）；
//var query_url=“将
$（'.display'）.dataTable（…
函数调用移动到ajax调用成功函数之外的某个位置。每次用户提交关键字时都会调用它。我没有使用dataTable，所以这只是我的第一个预感。第二个问题可能是您正在将单击事件处理程序绑定到
$（“[data item]”）上
此处也是。当用户提交第二个关键字时，此事件处理程序将复制到第一个关键字之上，并且在下一次单击时都将触发。请尝试首先解除绑定：
$（“[data item]”）。解除绑定（“click”）
，然后按原样打电话给
。
我真的不明白这个问题。你能把它放在一行/一句话上吗，例如我想…？当分页不起作用时，你做了一些事情。什么是“自动计算”？你能设置小提琴吗？-你可以使用这个起点
<div id="search_result" class="k-content">
     <div class="k-header" id="item-view-list" align="center">

        <table border="0" style="width: 80%; align: left" cellpadding="10" cellspacing="10" align="left">
            <tr>
                <td colspan="3">
                    <h5>SEARCH ITEM</h5>
                </td>
            </tr>
            <tr>
                <td style="width: 3%">
                    <label>Name/Description</label>
                </td>
                <td style="width: 40%">
                    <input type="text" name="keyword" id="keyword" style="width: 80%" /> <input type="button" value="SEARCH" id="search-btn" class="k-button" style="font-size: 12px" />
                </td>
            </tr>
        </table>

        <hr />

        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="font-size:small; width: 100%">
            <thead>
                <tr>

                </tr>
                <tr>
                    <th>CODE</th>
                    <th>NAME/DESCRIPTION</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br />

    </div>
</div>

<div class="k-content">
    <div class="k-header" id="item-view-list" align="center">

         <table id="grid1" border="0" style="width: 100%" cellpadding="10">

                <thead>
                    <tr>
                        <th style="text-align: center;">CODE</th>
                        <th style="text-align: center;">DESCRIPTION</th>
                        <th style="text-align: center;">QTY</th>
                        <th style="text-align: center;">UNIT</th>
                        <th style="text-align: center;">UNIT PRICE</th>
                        <th style="text-align: center;">TOTAL AMOUNT</th>
                    </tr>
                </thead>

                <tbody>

                </tbody>
            </table>

            <hr />

            <div align="right">

                <table border="0" cellpadding="10">
                    <tr>
                        <td>
                            <label>Shipping fee?</label>
                        </td>
                        <td>
                            <input type="checkbox" id="yes_shipping" onclick="document.getElementById('shipping_fee').style.display = (this.checked) ? '' : 'none';" />
                        </td>
                        <td>
                            <input type="text" placeholder="Amount (0.00)" id="shipping_fee" style="display: none" />
                        </td>
                    </tr>
                </table>

            </div>

            <hr />
            <div align="right">

                <table>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>VATable Amount:</td>
                            <td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="vatable" id="vatable" /></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td>VAT Input:</td>
                            <td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="vatable_amount" id="vatable_amount" /></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td>TOTAL SALES:</td>
                            <td><input type="text" class="k-textbox" value="" readonly="readonly" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="subtotal" id="gtotal" /></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td>PURCHASE DISCOUNT:</td>
                            <td><input type="text" class="k-textbox" value="" style="color: red; text-align: right; font-family: courier" name="discount" id="discount" placeholder="Enter discount" maxlength="2" required="required"/></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>PURCHASE RETURN:</td>
                            <td><input type="text" class="k-textbox" value="" style="color: red; text-align: right; font-family: courier" name="purchase_return" id="purchase_return"/></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td></td>
                            <td>TOTAL AMOUNT DUE:</td>
                            <td><input type="text" class="k-textbox" value="0.00" style="color: red; text-align: right; font-family: courier; background-color: lightgray;" name="total_amt_due" id="total_amt_due" readonly="readonly" /></td>
                        </tr>
                        <input type="hidden" id="sum_of_total" name="sum_of_total" />
                </table>