javascript - JS ajax + append 多次向一个元素添加相同的 HTML

Question

我已经通过这个 JavaScript 成功地实现了大部分所需的功能，但仍然存在一个我无法弄清楚的潜在麻烦错误:我编写的代码附加了所需的 HTML，但创建了不必要的重复项。

问题

代码多次附加按钮，而它应该只附加一次。我如何停止倍数？

(li)st 项目显示在 ul 中，样式如下所示(编号是任意的，我仅将其用作引用):

| 1 | 2 |
| 3 | 4 |
| 5 | 6 |

• 它给出 list 4、1 个按钮
• 它给出 list 1、2 的按钮
• 给出 list 2、3个按钮

它是从右到左从上到下吗？如果是这样，为什么？

我试图完成的事情:

第 1 阶段 - 检查视频并在存在视频时添加按钮

1. 检查此类别页面上的产品列表，看是否有“.Options”
2. 如果他们有 .Options，请检查/Videos/文件夹中是否存在与该产品 ID 匹配的视频
3. 如果视频文件夹中存在具有匹配产品 ID 的视频，请将播放/停止切换按钮附加到产品列表

第 2 阶段 - 按下按钮时播放/停止视频

1. 如果按下播放/停止按钮，添加带有相关视频 URL 的标签
2. 如果视频正在播放，按下按钮时停止并隐藏视频

JavaScript

    $('.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>');
       });
    });

HTML

    <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 个按钮的行为，但是，如果我的代码草率且效率低下，我不会感到惊讶，所以请随时批评其中的任何部分。

Answer 1

每次您获得 AJAX 响应时，您都在向所有 .videoDemoBtn 元素添加另一个点击处理程序。因此，下次您单击其中一个时，它将多次运行处理程序，这会添加多个 HTML 副本。

您应该在顶层进行所有事件绑定(bind)。由于这些是动态添加的元素，您应该使用事件委托(delegate)，如

中所述

Event binding on dynamically created elements?