document.ready и добавление динамических элементов формы

У меня проблема с моим кодом 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>

Я вызываю функцию addRows() с помощью onclick в моем html. Что я могу сделать, чтобы элементы динамической формы работали со сценарием, можно ли добавить функцию добавления в документ.ready или как это работает? Благодарим Вас за своевременную помощь!

1 ответ

Решение

Для динамически создаваемых элементов вам нужно будет делегировать события

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

Должно быть написано как

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

я думаю здесь $(document) можно заменить на $('table')

Другие вопросы по тегам