1

我的 javascript 代码有问题（很明显为什么我在这里） 这是我第一次寻求编程方面的帮助，所以请放轻松。

我有一个脚本可以在文档准备好时加载，并且它可以在我的页面中使用表单输入的单个静态实例正常工作，就像这样

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>New Invoice</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>

    $(document).ready(function() {
        $("input[id^='dyn_']").bind("change",function(e) {
            var myid = this.id;
            var index = myid.replace(/dyn_(hrs|rate|discount)_/,"");
            var hrs = $("#dyn_hrs_"+index).val();
            var rate = $('#dyn_rate_'+index).val();
            var discount = $('#dyn_discount_'+index).val();
            var finaldiscount = 0;
            var liTotal = $('#total_'+index);

            if(!isNaN(hrs) && !isNaN(rate)) {
                liTotal.val(CurrencyFormatted(Number(hrs)*Number(rate)));

            if(!isNaN(discount)) {
                finaldiscount = hrs * rate * (discount / 100); 
                liTotal.val(CurrencyFormatted(Number(hrs)*Number(rate) -Number(finaldiscount)));
    }
    }
    else liTotal.val('');

    var totalHrs = 0;
    var totalRate = 0;
    $("input[id^='dyn_hrs_']").each(function() {
        if(!isNaN(this.value)) totalHrs+=Number(this.value);
    });
    $("input[id^='total_']").each(function() {
        if(!isNaN(this.value)) totalRate+=Number(this.value);
    });

    // $("##gtotal_hrs").val(totalHrs);
    $("#gtotal_rate").val("$"+CurrencyFormatted(totalRate));

        });

    function CurrencyFormatted(amount)
    {
       var i = parseFloat(amount);
       if(isNaN(i)) { i = 0.00; }
       var minus = '';
       if(i < 0) { minus = '-'; }
       i = Math.abs(i);
       i = parseInt((i + .005) * 100);
       i = i / 100;
       s = new String(i);
       if(s.indexOf('.') < 0) { s += '.00'; }
       if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
       s = minus + s;
       return s;
    }
    });


    </script>

上面的脚本适用于我页面中的这些已定义的表单项。

           <tr>
              <td valign="top" id="draggabletr">&nbsp;</td>
              <td><input type="text" name="Service_Date" id="datepicker_1" size="25" class="service_date">&nbsp; </td>
              <td valign="top"><textarea name="Description_1" cols="20" rows="3" wrap="physical" id="Description_1" class="description_1"></textarea></td>
              <td valign="top"><input name="dyn_hrs_1" type="text" id="dyn_hrs_1" size="5" class="hours" >&nbsp; </td>
              <td valign="top"><input name="dyn_rate_1" type="text" id="dyn_rate_1" size="5" class="rate" >&nbsp; </td>
              <td valign="top"><input name="dyn_discount_1" type="text" id="dyn_discount_1" size="5" class="discount"></td>
              <td valign="top" class="Total"><input type="text" name="total_1" id="total_1" size="7"></td>
           </tr>

当我尝试将动态表行和表单输入添加到 DOM 中时，问题就开始了，如下所示：

   <script>
    var currentNumber = '1';
    function addRows() {
    currentNumber++;
    var strToAdd = '<tr><td valign="top" id="draggabletr"><input id="txtCount" name="txtCount" type="hidden" value="'+currentNumber+'" />&nbsp;</td><td><input type="text" name="Service_Date" id="datepicker_'+currentNumber+'" size="25" class="service_date">&nbsp; </td><td valign="top"><textarea name="Description'+currentNumber+'" cols="20" rows="3" wrap="physical" id="Description'+currentNumber+'" class="description"></textarea></td><td valign="top"><input name="dyn_hrs_'+currentNumber+'" type="text" id="dyn_hrs_'+currentNumber+'" size="5" class="hours" >&nbsp; </td><td valign="top"><input name="dyn_rate_'+currentNumber+'" type="text" id="dyn_rate_'+currentNumber+'" size="5" class="rate" >&nbsp; </td><td valign="top"><input name="dyn_discount_'+currentNumber+'" type="text" id="dyn_discount_'+currentNumber+'" size="5" class="discount"></td><td valign="top" class="Total"><input type="text" name="total_'+currentNumber+'" id="total_'+currentNumber+'" size="7"></td></tr>';
    $("#draggable tbody:last").append(strToAdd).html();
    }
    </script>

我在我的 html 中使用 onclick 调用 addRows() 函数。我可以做些什么来使动态表单项与脚本一起使用我可以将附加函数放在 document.ready 中还是如何工作？感谢您的及时帮助！

4

1 回答 1

0

对于动态创建的元素，您需要委托事件

$("input[id^='dyn_']").bind("change",function(e) {

应该写成

$(document).bind("change", "input[id^='dyn_']", function(e) {

我想这里$(document)可以替换为$('table')

于 2013-06-21T01:23:07.093 回答