Javascript 如何使用动态插入的字段进行工作
我有下面的div类“labouritems”,每次用户单击按钮时,它都会将一个新实例插入dom 我需要能够计算“.rate”和“.hours”字段,并将答案设置为“.total”字段 现在,这只适用于用户正在处理的“labouritems”实例,即:不应在另一个实例上更新字段总数,因此基本上只需在该行内工作 下面是我正在使用的html,下面是我的代码,它只适用于“labouritems”的第一个实例,但当我插入一个新实例时,它不会做任何事情Javascript 如何使用动态插入的字段进行工作,javascript,jquery,Javascript,Jquery,我有下面的div类“labouritems”,每次用户单击按钮时,它都会将一个新实例插入dom 我需要能够计算“.rate”和“.hours”字段,并将答案设置为“.total”字段 现在,这只适用于用户正在处理的“labouritems”实例,即:不应在另一个实例上更新字段总数,因此基本上只需在该行内工作 下面是我正在使用的html,下面是我的代码,它只适用于“labouritems”的第一个实例,但当我插入一个新实例时,它不会做任何事情 <div class="labouritems
<div class="labouritems">
<label for="quote_labouritems_attributes_0_description">Description</label>
<input class="input-medium" id="quote_labouritems_attributes_0_description" name="quote[labouritems_attributes][0][description]" size="30" type="text" value="concrete the house">
<label for="quote_labouritems_attributes_0_hours">Hours</label>
<input class="input-mini hours" id="quote_labouritems_attributes_0_hours" name="quote[labouritems_attributes][0][hours]" size="30" type="text" value="33">
<label for="quote_labouritems_attributes_0_total">Total</label>
<input class="input-mini total" id="quote_labouritems_attributes_0_total" name="quote[labouritems_attributes][0][total]" size="30" type="text" value="1089">
<label for="quote_labouritems_attributes_0_Mup/Hr">Mup/hr</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muphourrate" name="quote[labouritems_attributes][0][muphourrate]" size="30" type="text" value="0">
<label for="quote_labouritems_attributes_0_Mup/Total">Mup/total</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muptotal" name="quote[labouritems_attributes][0][muptotal]" size="30" type="text" value="0">
<label for="quote_labouritems_attributes_0_Mup/%">Mup/%</label>
<input class="input-mini" id="quote_labouritems_attributes_0_muppercent" name="quote[labouritems_attributes][0][muppercent]" size="30" type="text">
<label for="quote_labouritems_attributes_0_Contractor">Contractor</label>
<input class="input-small" data-autocomplete="/contractors/autocomplete_contractor_firstname" data-update-elements="{"id":"#quote_labouritems_attributes_0_contractor_id","hourly_rate":"#quote_labouritems_attributes_0_contractor_rate"}" id="quote_labouritems_attributes_0_contractor_name" name="quote[labouritems_attributes][0][contractor_name]" placeholder="Seach" size="30" type="text" value="bing lee">
<input id="quote_labouritems_attributes_0_contractor_id" name="quote[labouritems_attributes][0][contractor_id]" type="hidden" value="1">
<label for="quote_labouritems_attributes_0_Rate/hr">Rate/hr</label>
<input class="input-mini rate" id="quote_labouritems_attributes_0_contractor_rate" name="quote[labouritems_attributes][0][contractor_rate]" size="30" type="text" value="33">
<label for="quote_labouritems_attributes_0_Work %">Work %</label>
<input class="input-mini" id="quote_labouritems_attributes_0_progress_percent" name="quote[labouritems_attributes][0][progress_percent]" size="30" type="text" value="55">
<label for="quote_labouritems_attributes_0_Work $">Work $</label>
<input class="input-mini" id="quote_labouritems_attributes_0_progress_payment" name="quote[labouritems_attributes][0][progress_payment]" size="30" type="text">
<input id="quote_labouritems_attributes_0__destroy" name="quote[labouritems_attributes][0][_destroy]" type="hidden" value="false"><a href="javascript:void(0)" class="btn btn-small btn-danger remove_nested_fields" data-association="labouritems">Delete</a>
</div>
var LabourItems = {
rate: null,
hours: null,
total: null,
init: function(object) {
this.rate = parseInt($(object).children('.rate').first().val(), 10);
// var rate = $(object).children('.rate').first();
this.hours =parseInt($(object).children('.hours').first().val(), 10);
this.total = this.rate * this.hours;
this.updateTotal(object);
},
updateTotal: function(object) {
$(object).children('.total').first().val(this.total || 0);
}
}
//reactTochange for those inputs that you want to observe
$('.hours').on("keyup", function() {
$('.labouritems').each( function(key,value){
LabourItems.init(this);
});
});
描述
小时
全部的
单位/小时
Mup/总数
Mup/%
承包人
费率/小时
工作百分比
工作$
var LabourItems={
速率:空,
小时数:空,
总计:空,
init:函数(对象){
this.rate=parseInt($(object).children('.rate').first().val(),10);
//var rate=$(对象).children('.rate').first();
this.hours=parseInt($(object).children('.hours').first().val(),10);
this.total=this.rate*this.hours;
this.updateTotal(对象);
},
updateTotal:函数(对象){
$(object).children('.total').first().val(this.total | | 0);
}
}
//对您想要观察的输入进行响应更改
$('.hours')。打开(“键控”,函数(){
$('.labouritems')。每个(函数(键、值){
劳工局(本);
});
});
试试看
这将1.在文档上附加hours.keyup事件,而不是每个小时元素
2.仅更新已更改元素的总计您已经问了这个问题,并且得到了正确的答案。您不必要求代码中的每一个小和平。你是开发人员…所以你应该做你的代码。伙计,如果我能得到正确的答案,我就不必一直问,这个网站是关于分数的,只要写一个快速的答案,没有后续的任何问题。
$(documents).on("keyup", '.hours', function() {
LabourItems.init(this.closest('.labouritems'));
});