jquery增加一行后下拉提示问题

weiba963 2016-12-02 05:07:28

有一个批量添加的页面.在项目输入框中输入项目关键字会自动下拉提示与关键字相关的项目,然后选中后,单价框中显示该项目的单价,输入数量自动计算出金额.
现在都可以用了.只是在批量增加一行之后.增加的那行,输项目关键字不会提示下拉.请哪位帮帮忙.看看JS.怎么融合起来让批量增加的在输入项目的时候也有下拉提示并且选择项目后,单价框显示单价. 用的是autocomplete插件

下面是代码:



<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

<script type="text/javascript" src="ui/jquery.ui.core.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.widget.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.position.js"></script> 

<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script> 

</head>



<body>

  <script>

  $(function() {

    var projects = [

      {

        value: "12",

        label: "jQuery",

      },

      {

        value: "21",

        label: "jQuery UI",

      },

      {

        value: "23",

        label: "Sizzle JS",

      }

    ];

    $( "#objname" ).autocomplete({

      minLength: 0,

      source:projects,

      focus: function( event, ui ) {

        $( "#objname" ).val( ui.item.label );

        return false;

      },

      select: function( event, ui ) {

        $( "#objname" ).val( ui.item.label );

        $( "#price" ).val( ui.item.value );

        return false;

      }

    })

  });



  </script>

    	<table width="100%" border="0" cellpadding="0" cellspacing="0" id="optionContainer">

            <TR class="title3">

                <td class="td_l_c" width="60">序号</td>

                <td class="td_l_c" width="200">项目</td>

                <td class="td_l_c" width="80">单价</td>

                <td class="td_l_c" width="100">次数</td>

                <td class="td_l_c" width="100">金额</td>

                <td class="td_l_c" width="60">折扣</td>

                <td class="td_l_c" width="80">操作</td>

            </TR>

            <TR>

                <td class="td_l_c"><input name="number" type="text" class="int" size="5" value="1" /></td>

                <td class="td_l_c"><input name="objname" id="objname" type="text" class="int" size="30" placeholder="请输入项目名字或拼音" /></td>

                <td class="td_l_c"><input name="price" id="price" type="text" class="int" size="10"/></td>

                <td class="td_l_c"><input name="count" id="count" type="text" class="int" size="5" onkeyup="NumberCheck(this)"/></td>

                <td class="td_l_c"><input name="money" id="money" type="text" class="int" size="12" readonly="readonly" value="0" /></td>

                <td class="td_l_c"><input name="zhekou" id="zhekou" type="text" class="int" size="3" value="100"/>%</td>

                <td class="td_l_c"><a href="#" onclick="addRow()">增加</a></td>

            </TR>

        </table>

        <div style="width:99.9%; border-top:1px solid #E1E2E4; border-right:1px solid #E1E2E4; overflow:hidden;">

        <li style="width:20%; float:right; line-height:32px;">总金额<input name="total" id="total" type="text" class="int" size="10" readonly="readonly" value="0" /></li>

        <li style="width:15%; float:right; line-height:32px;">共计<input name="itemt" id="itemt" value="1" type="text" class="int" size="3" readonly="readonly" />个项目</li>

        </div>

<script type="text/javascript">

//增加行

function addRow(){

    var rowCount = $('#optionContainer tr').length;

    var newRow='<tr>'

	+'<td class="td_l_c"><input name="number" type="text" class="int" size="5" value="'+rowCount+'"></td>'

	+'<td class="td_l_c"><input name="objname" type="text" class="int" size="30" placeholder="请输入项目名字或拼音" /></td>'

	+'<td class="td_l_c"><input name="price" type="text" class="int" size="10" /></td>'

	+'<td class="td_l_c"><input name="count" type="text" class="int" size="5" onkeyup="NumberCheck(this)"/></td>'

	+'<td class="td_l_c"><input name="money" type="text" class="int" size="12" readonly="readonly" value="0" /></td>'

	+'<td class="td_l_c"><input name="zhekou" type="text" class="int" size="3" value="100"/>%</td>'

	+'<td class="td_l_c"><a href="#" onclick="delRow(this)">删除</a></td>'

	+'</tr>';

    $('#optionContainer').append(newRow);

    $("#itemt").val(rowCount);

}

//删除行

function delRow(t){

    $(t).closest("tr").remove();

    $('#optionContainer input[name="number"]').val(function (i) {return i+1;});

    var rowCount = $('#optionContainer tr').length-1;

    $("#itemt").val(rowCount);

    allmoney();

}

//计算金额

$(function(){

    $("#optionContainer").on("keyup", 'input[name="price"],input[name="count"],input[name="zhekou"]', function(event){

        var tr = $(this).closest("tr");

        var e1 = $('input[name="price"]',tr).val() || 0;

        var e2 = $('input[name="count"]',tr).val() || 0;

        var e3 = $('input[name="zhekou"]',tr).val() || 0;

        if(isNaN(e1)){e1=0;$('input[name="price"]',tr).val(0);}

        if(isNaN(e2)){e2=0;$('input[name="count"]',tr).val(0);}

        if(isNaN(e3)){e3=0;$('input[name="zhekou"]',tr).val(0);}

        $('input[name="money"]',tr).val(parseFloat(e1)*parseInt(e2)*parseInt(e3)/100);

        allmoney();

    })

})

//显示总金额

function allmoney() {

    var money = 0;

    $('#optionContainer input[name="money"]').each(function () {

          money += parseFloat($(this).val()) || 0;

    });

    $("#total").val(money);

 

}

 

function NumberCheck(t){   //数量输入框只能输入整数

        var num = t.value;

        var re=/^\d*$/;

        if(!re.test(num)){

            isNaN(parseInt(num))?t.value=0:t.value=parseInt(num);

        }

    }

</script>