克隆选择字段不会触发事件 [英] Cloned Select Fields do not trigger an event
本文介绍了克隆选择字段不会触发事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法为此表找到我正在使用JQuery进行克隆的解决方案。我可以克隆表并更新ID和NAME属性以避免html冲突。当我使用表的第一个（原始）副本时，选择下拉菜单仅触发事件到其JQuery。但是，克隆的版本不会触发我用来填写说明数量和价格字段的必需事件。我发布我的表和JQuery。有人可以让我知道我错过了什么工作吗？我通过创建两个具有各自的唯一ID的表来测试JQuery，该表用于触发事件，这样可以正常工作。然后，当我使用JQuery克隆表时，事件不会被触发。
< 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-controlid =ProductCode1name =ProductCode1style =border-bottom-color：black！important; border-color：white;>
< option selected>选择产品< / option>
< option value ='292'data-description ='APRIL下午在温室TICKET'data-price = '35 .00'> AAATG< / option>
< option value ='285'data-description ='在温室中的APRIL AFTERNOONEARLYBIRD 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&＃x27; s Lemon / Garlic Salad Dressing 16 Oz。'data-price = '11 .00'> Alberto&＃x27; s Dressing&选项>
< option value ='241'data-description ='有机葫芦巴发芽豆4盎司'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橄榄油500ML CASE'data-price = '84 .00'> BB OO 500ML< / option>
< option value ='278'data-description ='DM Organic Extra Virgin橄榄油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 ='有机混合豆1 Lb'data-price ='8.00'> BEEMB< / option>
< / select>
< / div>
< td style =width：70％;>< input id =ProductDesc1class =form-controlstyle =width：100％; border-bottom-color：black！ ; border-color：white; name =ProductDesc1type =textvalue =/>< / td>
< td>< input id =quantity1class =form-controlstyle =width：50px; border-bottom-color：black！important; border-color：white; text-align：中央; name =quantity1type =textvalue =0placeholder =1/>< / td>
< td>
< input id =ProductPrice1class =form-control coststyle =width：95px; text-align：center; border-bottom-color：black！important; border-color：white; name =ProductPrice1type =textvalue =placeholder =$ 0.00/>
< / td>
< td>
< div class =input-group-addon>
< span class =glyphicon glyphicon-eject remove>< / span>
< / div>
< / td>
< / tr>
< / table>
执行克隆并更新ID和NAME属性的JQuery：
< script>
var template = $（'＃sections .section：first'）。clone（）;
var sectionsCount = 1;
$（'body'）。on（'click'，'.addsection'，function（）{
sectionsCount ++;
var section = template.clone（） '）.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（'＃ section'）;
return false;
}）;
//删除节
$（'＃sections'）。on（'click'，'.remove'，function（）{
$（this）.parent ）.fadeOut（300，function（）{
$（this）.parent（）。parent（）。empty（）;
return false;
}）;
return false;
}）;
< / script>
最后，当我选择一个产品时，聆听事件的JQuery填写剩余的字段。 $（$）$（$）$（$）$（$）$（$）$（$） ！）
$（'＃ProductCode2'）。on（change，function（）{alert（It Again again！）}）;
$（'＃ProductCode3' ）.on（change，function（）{alert（它工作第三次！）}）;
}）;
< / script>
解决方案
jQuery $ $（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第三次！）}）;
}）;
To This：
$ b $ （$）$（$）$（$）$（$）$（$）
$（document）.on（'change'，'＃ProductCode2'，function（）{alert（It works again！）}）;
$（document）.on（'change'，'＃ProductCode3'，function（）{alert（It works the third time！）}）;
I am unable to find a solution for this Table that I am cloning with JQuery. I am able to clone the table and update the ID and NAME properties to avoid html conflicts. The Select drop-down only triggers an event to its JQuery when I use the first (original) copy of the table. However, the cloned version does not trigger the required event that I am using to fill-in the Description Quantity and Price fields. I am posting my Table and JQuery. Can someone please let me know what I am missing to get this to work? I tested the JQuery by creating two tables with their respective Unique IDs that I use to trigger the event, which works fine. Then, when I use JQuery to clone the Table, the Event is not triggered.
<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>
The JQuery that performs the clone and updates the ID and NAME properties:
<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>
解决方案
jQuery code inside $(document).ready() function will work only for available DOM elements when page loaded
So in order to make it work for dynamically cloned dropdowns update your jQuery binding code like this:
This:
$(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!") });
});
To This:
$(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!") });
这篇关于克隆选择字段不会触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
