Jquery 克隆的选择字段不会触发事件
我无法找到使用JQuery克隆的表的解决方案。我能够克隆表并更新ID和NAME属性,以避免html冲突。当我使用表的第一个(原始)副本时,Select下拉列表仅触发JQuery的事件。但是,克隆版本不会触发我用于填写描述数量和价格字段的所需事件。我正在发布我的表和JQuery。有人能告诉我我缺少什么来让它工作吗?我通过创建两个具有各自唯一ID的表来测试JQuery,我使用这两个表来触发事件,效果很好。然后,当我使用JQuery克隆表时,不会触发该事件Jquery 克隆的选择字段不会触发事件,jquery,events,clone,Jquery,Events,Clone,我无法找到使用JQuery克隆的表的解决方案。我能够克隆表并更新ID和NAME属性,以避免html冲突。当我使用表的第一个(原始)副本时,Select下拉列表仅触发JQuery的事件。但是,克隆版本不会触发我用于填写描述数量和价格字段的所需事件。我正在发布我的表和JQuery。有人能告诉我我缺少什么来让它工作吗?我通过创建两个具有各自唯一ID的表来测试JQuery,我使用这两个表来触发事件,效果很好。然后,当我使用JQuery克隆表时,不会触发该事件 <table&
<table>
<tr>
<td style="width:20%;">
<div class="input-group date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-duplicate addsection"></span>
</div>
<select class="form-control" id="ProductCode1" name="ProductCode1" style="border-bottom-color:black!important;border-color:white;">
<option selected>Select Product</option>
<option value='292' data-description='APRIL Afternoon At the Greenhouse TICKET' data-price='35.00'>AAATG</option>
<option value='285' data-description='APRIL AFTERNOON AT THE GREENHOUSE Ticket EARLYBIRD SPECIAL' data-price='30.00'>AAATGearlybird</option>
<option value='30' data-description='Organic Adzuki Beans 1/2 Lb' data-price='4.25'>AB12LB</option>
<option value='31' data-description='Organic Adzuki Beans 1/4 Lb' data-price='2.25'>AB14LB</option>
<option value='29' data-description='Organic Adzuki Beans 1 Lb' data-price='8.00'>AB1LB</option>
<option value='47' data-description='Organic Adzuki Seeds 1 Lb' data-price='5.00'>ABS1LB</option>
<option value='145' data-description='Alberto's Lemon/Garlic Salad Dressing 16 Oz.' data-price='11.00'>Alberto's Dressing</option>
<option value='241' data-description='Organic Fenugreek Sprouted Beans 4 oz.' data-price='2.00'>APRIL</option>
<option value='310' data-description='Organic Fenugreek Sprouted Beans 16 oz' data-price='7.75'>April16oz</option>
<option value='309' data-description='Organic Fenugreek Sprouted Beans 8 oz' data-price='4.00'>April8oz</option>
<option value='284' data-description='SeaVeggieSpecialAUGUST1Kelp/1Dulse/1TripleBlendPACKAGE of 3' data-price='11.50'>AUGUST</option>
<option value='271' data-description='DM Organic Tomato Basil Sauce CASE' data-price='36.00'>BB BasilS case</option>
<option value='273' data-description='DM Organic Tomato Chili Sauce CASE' data-price='36.00'>BB ChiliS case</option>
<option value='276' data-description='DM Organic Linguine Pasta CASE' data-price='36.00'>BB Lpasta case</option>
<option value='277' data-description='DM Organic Extra Virgin Olive Oil 500ML CASE' data-price='84.00'>BB OO 500ML</option>
<option value='278' data-description='DM Organic Extra Virgin Olive Oil 750ML CASE' data-price='132.00'>BB OO 750ML</option>
<option value='275' data-description='DM Organic Spaghetti Pasta CASE' data-price='36.00'>BB Spasta case</option>
<option value='274' data-description='DM Organic Tagliatelle Pasta CASE' data-price='36.00'>BB Tpasta case</option>
<option value='272' data-description='DM Organic Tomato Vegetable Sauce CASE' data-price='36.00'>BB VegS case</option>
<option value='117' data-description='Organic Mixed Beans 1 Lb' data-price='8.00'>BEEMB</option>
</select>
</div>
<td style="width:70%;"><input id="ProductDesc1" class="form-control" style="width: 100%; border-bottom-color: black!important; border-color: white;" name="ProductDesc1" type="text" value="" /></td>
<td><input id="quantity1" class="form-control" style="width: 50px; border-bottom-color: black!important; border-color: white; text-align: center;" name="quantity1" type="text" value="0" placeholder="1" /></td>
<td>
<input id="ProductPrice1" class="form-control cost" style="width: 95px; text-align: center; border-bottom-color: black!important; border-color: white;" name="ProductPrice1" type="text" value="" placeholder="$0.00" />
</td>
<td>
<div class="input-group-addon">
<span class="glyphicon glyphicon-eject remove"></span>
</div>
</td>
</tr>
</table>
精选产品
AAATG
AAATGearlybird
AB12磅
AB14磅
AB1LB
ABS1LB
阿尔贝托';s敷料
四月
四月十六盎司
四月八盎司
八月
BB罗勒案例
BB辣椒案
BB Lpasta案
BB OO 500ML
BB OO 750ML
BB Spasta案例
BB Tpasta案
BB蔬菜案
比姆
执行克隆并更新ID和NAME属性的JQuery:
<script>
var template = $('#sections .section:first').clone();
var sectionsCount = 1;
$('body').on('click', '.addsection', function () {
sectionsCount++;
var section = template.clone().find(':input').each(function () {
var newId = this.id.substring(0, this.id.length - 1) + sectionsCount;
var newName = this.name.substring(0, this.name.length - 1) + sectionsCount;
this.id = newId;
this.name = newName;
}).end()
.appendTo('#sections');
return false;
});
//remove section
$('#sections').on('click', '.remove', function () {
$(this).parent().fadeOut(300, function () {
$(this).parent().parent().empty();
return false;
});
return false;
});
</script>
Finally, the JQuery that listen to the Event to fill-in the remaining fields when I select a Product.
$(document).ready(function () {
$('#ProductCode1').on("change", function () { alert("It Works!") });
$('#ProductCode2').on("change", function () { alert("It Works again!") });
$('#ProductCode3').on("change", function () { alert("It Works a third time!") });
});
</script>
var template=$('#sections.section:first').clone();
var SectionScont=1;
$('body')。在('click','addsection',函数()上{
sectionScont++;
var section=template.clone().find(“:input”).each(函数(){
var newId=this.id.substring(0,this.id.length-1)+sectionScont;
var newName=this.name.substring(0,this.name.length-1)+sectionScont;
this.id=newId;
this.name=newName;
})(完)
.附于(“#节”);
返回false;
});
//删除部分
$('#sections')。在('click','remove',函数(){
$(this).parent().fadeOut(300,函数(){
$(this.parent().parent().empty();
返回false;
});
返回false;
});
最后,当我选择产品时,JQuery将侦听事件以填充其余字段。
$(文档).ready(函数(){
$('ProductCode1')。on(“change”,函数(){alert(“It Works!”)});
$('ProductCode2')。在(“change”,function(){alert(“它再次工作!”)});
$('#ProductCode3')。on(“change”,function(){alert(“它第三次工作!”)});
});
jQuery
code-inside$(document).ready()
函数仅在加载页面时对可用的DOM
元素有效
因此,为了使动态克隆下拉列表能够工作,请如下更新jQuery
绑定代码:
这个:
$(document).ready(function () {
$('#ProductCode1').on("change", function () { alert("It Works!") });
$('#ProductCode2').on("change", function () { alert("It Works again!") });
$('#ProductCode3').on("change", function () { alert("It Works a third time!") });
});
$(document).on('change', '#ProductCode1', function(){ alert("It Works!") });
$(document).on('change', '#ProductCode2', function(){ alert("It Works again!") });
$(document).on('change', '#ProductCode3', function(){ alert("It Works a third time!") });
对此:
$(document).ready(function () {
$('#ProductCode1').on("change", function () { alert("It Works!") });
$('#ProductCode2').on("change", function () { alert("It Works again!") });
$('#ProductCode3').on("change", function () { alert("It Works a third time!") });
});
$(document).on('change', '#ProductCode1', function(){ alert("It Works!") });
$(document).on('change', '#ProductCode2', function(){ alert("It Works again!") });
$(document).on('change', '#ProductCode3', function(){ alert("It Works a third time!") });
谢谢你的回复。它与现有JQuery脚本一起工作。如何处理克隆脚本?我希望允许用户动态添加额外的列并实时处理它们。我可以预先创建10个额外的处理程序,以预测可能的额外克隆产品线,但是,我更愿意在创建额外的行时克隆JQuery处理程序。