2013-06-21 39 views
1

我的javascript代码有问题(显然为什么我在这里)这是我第一次请求编程帮助,所以请在我身上轻松一下。document.ready和追加动态表单项目

我有被加载脚本时的文件已准备就绪,在我的网页作品罚款的形式输入一个静态实例,像这样

<!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> 

我打电话的addRows()函数的onclick在我的HTML 。我可以做些什么来使动态表单项与脚本一起工作,我可以将附加函数放在document.ready中,或者它是如何工作的?非常感谢您的及时帮助!

回答

0

对于动态创建的元素你就需要委托

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

应该写成

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

我在这里猜测事件$(document)可以$('table')

被取代