JS AJAX +追加相同的HTML多次添加到一个元素 [英] JS ajax + append add same HTML multiple times to one element

查看：89 发布时间：2015/11/28 22:46:18 javascript jquery ajax

本文介绍了JS AJAX +追加相同的HTML多次添加到一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经成功实施的大部分所需的功能，通过这个JavaScript，但仍有潜在麻烦的错误，我想不通：的code我写的附加所需的HTML而造成不必要的重复的

问题

在code追加按钮多次，当它应该追加一次。如何停止的倍数？

的（李）ST的项目出现在风格像这样的表（编号是任意的，我只用它供我们参考）的UL：

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

在它给上市4,1按钮
在它给上市1，2按钮
在它给上市2，3按钮

难道会从右到左顶至底？如果是的话，为什么

？

我试图做到：

第1阶段 - 检查录像，并添加按钮，如果视频present

检查这一类页的产品目录，看看是否有任何可供选项
如果他们有可供选项，查看是否视频匹配这个产品的ID中/视频/文件夹是否存在
如果有匹配的产品ID的视频在视频文件夹中存在，附加一个播放/停止切换按钮，产品上市

第二阶段 - 播放/停止视频按钮preSS

<醇开始=4>

如果播放/停止按钮时pressed，相关视频的网址添加标签

如果视频正在播放，停止和隐藏在按键preSS

视频

中的JavaScript

  $（'。videoDemoBtn'）。在（'点击'，函数（）{
    如果（$（本）.hasClass（'videoPlaying'））{
        $（本）.removeClass（'videoPlaying'）;
        $（本）.parent（）找到（'div.categoryDemoVideo'）隐藏（）HTML（''）。。
        }
        其他 {
            。VAR的ProductId = $（本）.parent（）找到（'div.ProductImage'）ATTR（数据产品）。
            $（本）.addClass（'videoPlaying'）;
            $（本）.parent（）找到（'div.categoryDemoVideo）显示（）HTML（'＆LT;视频ID =demoVideo级=视频preLOAD =自动自动播放=自动播放循环=循环自动缓冲=自动缓冲静音=静音控件=控制WIDTH =100％高度=100％的海报=https://store-mixi7d.mybigcommerce.com/content/ 。视频/+的ProductId +JPG＆GT;＆lt;信源SRC =https://store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.mp4＆GT;＆lt;信源SRC =HTTPS： //store-mixi7d.mybigcommerce.com/content/videos/'+ProductId+'.ogvTYPE =视频/ OGG＆GT;＆LT; P＆GT;您的浏览器不支持此视频，请升级您的浏览器＆LT;。！/ P＆GT;＆LT; /视频＆GT;'）;
                    }
            }）;
    $（选项）。每个（函数checkForVideo（URL）{
    VAR ProductCatOpt = $（本）;
        。的ProductId = $（本）.parent（）父（）找到（'div.ProductImage'）ATTR（数据产品）。
    功能ajax1（）{
        返回$阿贾克斯（'/内容/视频/'+的ProductId +。MP4）
            .done（函数（）{
                $（ProductCatOpt）.addClass（'随着视频'）;
            }），失败（函数（）{
                返回;
            }）;
        }
        $。当（ajax1（））。完成（功能（A1）{
            。$（'。随着视频）最近（礼）追加（'＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;'） ;
       }）;
    }）;

的HTML

 ＆LT; UL类=产品列表的风格=的位置是：相对;高度：1407px;＆GT;
        ＆LT;李类=奇的风格=最小高度：456px;位置：绝对的;左：0px;顶端：0px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=296＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;

                ＆LT; A HREF =＃someproduct级=BTN小图标，选择选项随着视频标题=选择选项＆GT;选择选项＆LT; / A＆GT;＆LT; / DIV＆GT;

            ＆LT;！ - 在这里，在带班可供选项的UL首批上市会创建2个按钮 - ＆GT;
            ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
            ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
            ＆LT;！ - 在这里，在带班可供选项的UL首批上市会创建2个按钮 - ＆GT;

        ＆LT; /李＆GT;
        ＆LT;李类=连的风格=最小高度：456px;位置：绝对的;左：310px;顶部：0px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=431＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;

                ＆LT; A HREF =＃someproduct级=BTN小图标，选择选项随着视频标题=选择选项＆GT;选择选项＆LT; / A＆GT;＆LT; / DIV＆GT;

            ＆LT;！ - 虽然在这里的第二个去年上市的带班的UL可供选项将创建3个按钮 - ＆GT;
           ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
           ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
           ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
            ＆LT;！ - 虽然在这里的第二个去年上市的带班的UL可供选项将创建3个按钮 - ＆GT;

        ＆LT; /李＆GT;
        ＆LT;李类=奇的风格=最小高度：435px;位置：绝对的;左：0px;顶端：476px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=389＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;
                ＆LT; A HREF =＃someproduct级=BTN小图标放入购物车称号=放入购物车＆gt;添加到购物车＆LT; / A＆GT;＆LT; / DIV＆GT;
        ＆LT; /李＆GT;
        ＆LT;李类=连的风格=最小高度：435px;位置：绝对的;左：310px;顶：476px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=393＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;

                ＆LT; A HREF =＃someproduct级=BTN小图标，选择选项随着视频标题=选择选项＆GT;选择选项＆LT; / A＆GT;＆LT; / DIV＆GT;

            ＆LT;！ - 然而ERE在带班的UL最后上市可供选项会创建仅1按钮 - ＆GT;
            ＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT; / SPAN＆GT;
            ＆LT;！ - 然而ERE在带班的UL最后上市可供选项会创建仅1按钮 - ＆GT;

       ＆LT; /李＆GT;
        ＆LT;李类=奇的风格=最小高度：456px;位置：绝对的;左：0px;顶端：931px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=428＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;
                ＆LT; A HREF =＃someproduct级=BTN小图标放入购物车称号=放入购物车＆gt;添加到购物车＆LT; / A＆GT;＆LT; / DIV＆GT;
        ＆LT; /李＆GT;
        ＆LT;李类=连的风格=最小高度：456px;位置：绝对的;左：310px;顶：931px;＆GT;
            ＆LT; DIV CLASS =ProductImage快速浏览数据产品=388＆GT;
                ＆LT; DIV CLASS =categoryDemoVideo＆GT;＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =ProductActionAdd的风格=显示：;＆GT;
                ＆LT; A HREF =＃someproduct级=BTN小图标放入购物车称号=放入购物车＆gt;添加到购物车＆LT; / A＆GT;＆LT; / DIV＆GT;
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;

我已经做了的jsfiddle这里但它是没有帮助的影片必须可与阿贾克斯检查必须是在同一个域这个工作，并且ProductIDs动态由我公司采用该平台的PHP产生。

我专找停然而，导致多个按钮被附加，而不是仅仅1的行为，我也不会感到惊讶，如果我的code是草率的，效率低下，所以请随意批评任何部分这一点。

解决方案

要处理，你需要绑定到pre-现有元素和委托处理该事件的动态元素。

修改

  $（'。videoDemoBtn'）。在（'点击'，函数（）{

到

  $（'。产品列表'）。在（'点击'，'.videoDemoBtn'，函数（）{

[更新]

有关的问题，你最有可能需要更改重复按钮

  $（'。随着视频）最近（礼）追加（'＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT; ＆LT; / DIV＆GT;＆LT; / SPAN＆GT;'）;

到

  ProductCatOpt.closest（礼）追加（'＆LT;跨度类=videoDemoBtn＆GT;＆LT; DIV CLASS =三角＆GT;＆LT; / DIV＆GT;＆LT ; /跨度＆GT;'）;

这种方式，你只追加元素相关的产品的，而不是在页面中的所有 .withVideo 元素。

I've succeeded in implementing most of the desired functionality via this JavaScript but there is still a potentially troublesome bug that I can't figure out: the code I wrote appends desired HTML but creates unnecessary duplicates.

The Problem

The code appends the button multiple times, when it should append just once. How do I stop the multiples?

The (li)st items show up in a ul styled like a table like this (the numbering is arbitrary and I only use it for our reference):

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

It gives listing 4, 1 buttons
It gives listing 1, 2 buttons
It gives listing 2, 3 buttons

Is it going right-to-left top-to-bottom? And if so, why?

What I tried to accomplish:

Stage 1 - Check for video and add button if video present

Check product listings on this category page to see if any have ".Options"
If they have .Options, check to see if a video matching this product's ID exists in /Videos/ folder
If video with matching Product ID exists in videos folder, attach a Play/Stop toggle button to product listing

Stage 2 - Play/Stop video on button press

If Play/Stop button is pressed, add tag with relevant video URL
If video is playing, stop and hide video upon button press

The 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>');
       });
    });

The 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>

I've done a JSFiddle here but it's of no help as the videos that must be checked for with ajax have to be on same domain for this to work, and the ProductIDs are dynamically generated by the PHP of the platform I am using.

I am specifically looking to stop the behavior that causes multiple buttons to be appended instead of just 1, however, I wouldn't be surprised if my code was sloppy and inefficient so please feel free to criticize any part of this.

解决方案

To handle dynamic elements you need to bind to a pre-existing element and delegate the event handling to that.

Change

$('.videoDemoBtn').on('click', function () {

$('.ProductList').on('click', '.videoDemoBtn', function () {

[Update]

For the issue with the duplicate buttons you most likely need to change

$('.withVideo').closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');

ProductCatOpt.closest('li').append('<span class="videoDemoBtn"><div class="triangle"></div></span>');

this way you only append the element to the relevant product instead of all the .withVideo elements in the page.

这篇关于JS AJAX +追加相同的HTML多次添加到一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

JS AJAX +追加相同的HTML多次添加到一个元素 [英] JS ajax + append add same HTML multiple times to one element

问题描述

问题

难道会从右到左顶至底？如果是的话，为什么

我试图做到：

第1阶段 - 检查录像，并添加按钮，如果视频present

第二阶段 - 播放/停止视频按钮preSS

中的JavaScript

的HTML

The Problem

Is it going right-to-left top-to-bottom? And if so, why?

What I tried to accomplish:

Stage 1 - Check for video and add button if video present

Stage 2 - Play/Stop video on button press

The JavaScript

The HTML

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

JS AJAX +追加相同的HTML多次添加到一个元素 [英] JS ajax + append add same HTML multiple times to one element

问题描述

问题

难道会从右到左顶至底？如果是的话，为什么

我试图做到：

第1阶段 - 检查录像，并添加按钮，如果视频present

第二阶段 - 播放/停止视频按钮preSS

中的JavaScript

的HTML

The Problem

Is it going right-to-left top-to-bottom? And if so, why?

What I tried to accomplish:

Stage 1 - Check for video and add button if video present

Stage 2 - Play/Stop video on button press

The JavaScript

The HTML

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭