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"> </td>
<td><input type="text" name="Service_Date" id="datepicker_1" size="25" class="service_date"> </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" > </td>
<td valign="top"><input name="dyn_rate_1" type="text" id="dyn_rate_1" size="5" class="rate" > </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+'" /> </td><td><input type="text" name="Service_Date" id="datepicker_'+currentNumber+'" size="25" class="service_date"> </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" > </td><td valign="top"><input name="dyn_rate_'+currentNumber+'" type="text" id="dyn_rate_'+currentNumber+'" size="5" class="rate" > </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')