我已经通过这个JavaScript成功实现了大部分所需的功能，但仍然存在一个我无法弄清楚的潜在麻烦的错误：我编写的代码附加了所需的HTML但是创建了不必要的重复。
代码会多次附加按钮，只需添加一次。如何停止倍数？
（li）st项目显示为像这样的表格样式（编号是任意的，我只使用它作为参考）：
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
$('.videoDemoBtn').on('click', function () {
if ($(this).hasClass('videoPlaying')) {
$(this).removeClass('videoPlaying');
$(this).parent().find('div.categoryDemoVideo').hide().html('');
}
else {
var ProductId = $(this).parent().find('div.ProductImage').attr('data-product');
$(this).addClass('videoPlaying');
$(this).parent().find('div.categoryDemoVideo').show().html('<video id="demoVideo" class="video" preload="auto" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" controls="controls" width="100%" height="100%" poster="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.jpg"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.mp4"><source src="https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.ogv" type="video/ogg"><p>Your browser does not support this video. Please upgrade your browser!</p></video>');
}
});
$(".Options").each(function checkForVideo(url) {
var ProductCatOpt = $(this);
ProductId = $(this).parent().parent().find('div.ProductImage').attr('data-product');
function ajax1() {
return $.ajax('/content/videos/'+ProductId+'.mp4')
.done(function() {
$(ProductCatOpt).addClass('withVideo');
}).fail(function() {
return;
});
}
$.when(ajax1()).done(function(a1){
$('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
});
});
<ul class="ProductList " style="position: relative; height: 1407px;">
<li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 0px;">
<div class="ProductImage QuickView" data-product="296">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>
<!-- Here in the first listing in the ul with class .Options it creates 2 buttons -->
<span class="videoDemoBtn"><div class="triangle"></div></span>
<span class="videoDemoBtn"><div class="triangle"></div></span>
<!-- Here in the first listing in the ul with class .Options it creates 2 buttons -->
</li>
<li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 0px;">
<div class="ProductImage QuickView" data-product="431">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>
<!-- While here in the 2nd to last listing in the ul with class .Options it creates 3 buttons -->
<span class="videoDemoBtn"><div class="triangle"></div></span>
<span class="videoDemoBtn"><div class="triangle"></div></span>
<span class="videoDemoBtn"><div class="triangle"></div></span>
<!-- While here in the 2nd to last listing in the ul with class .Options it creates 3 buttons -->
</li>
<li class="Odd " style="min-height: 435px; position: absolute; left: 0px; top: 476px;">
<div class="ProductImage QuickView" data-product="389">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
</li>
<li class="Even " style="min-height: 435px; position: absolute; left: 310px; top: 476px;">
<div class="ProductImage QuickView" data-product="393">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Choose Options withVideo" title="Choose Options">Choose Options</a></div>
<!-- And yet ere in the last listing in the ul with class .Options it creates just 1 button -->
<span class="videoDemoBtn"><div class="triangle"></div></span>
<!-- And yet ere in the last listing in the ul with class .Options it creates just 1 button -->
</li>
<li class="Odd " style="min-height: 456px; position: absolute; left: 0px; top: 931px;">
<div class="ProductImage QuickView" data-product="428">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
</li>
<li class="Even " style="min-height: 456px; position: absolute; left: 310px; top: 931px;">
<div class="ProductImage QuickView" data-product="388">
<div class="categoryDemoVideo"></div>
</div>
<div class="ProductActionAdd" style="display:;">
<a href="#someproduct" class="btn Small icon-Add To Cart" title="Add To Cart">Add To Cart</a></div>
</li>
</ul>
我已经完成JSFiddle here但没有任何帮助，因为必须使用ajax检查的视频必须位于同一个域才能生效，而且ProductID是动态的由我正在使用的平台的PHP生成。
我特别希望停止导致多个按钮被追加而不仅仅是1的行为，但是，如果我的代码很邋and且效率低下，我不会感到惊讶所以请随意批评任何部分
答案 0 :(得分：2)
每次获得AJAX响应时，您都会向所有.videoDemoBtn元素添加另一个点击处理程序。因此，下次单击其中一个时，它将多次运行处理程序，这会添加HTML的多个副本。
您应该在顶层执行所有事件绑定。由于这些是动态添加的元素，因此您应该使用事件委派，如
中所述答案 1 :(得分：1)
要处理动态元素，您需要绑定到预先存在的元素，并将事件处理委托给它。
更改
$('.videoDemoBtn').on('click', function () {
到
$('.ProductList').on('click', '.videoDemoBtn', function () {
<强> [更新]
对于重复按钮的问题，您很可能需要更改
$('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
到
ProductCatOpt.closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');
这样您只需将元素附加到相关的产品，而不是页面中的所有.withVideo元素。