Fatal编程技术网
  • javascript/
  • Javascript jsajax+；将相同的HTML多次追加到一个元素

Javascript jsajax+；将相同的HTML多次追加到一个元素

javascript jquery ajax

Javascript jsajax+；将相同的HTML多次追加到一个元素,javascript,jquery,ajax,Javascript,Jquery,Ajax,我已经通过这个JavaScript成功地实现了大部分所需的功能，但仍然有一个潜在的麻烦bug我无法解决：我编写的代码附加了所需的HTML，但创建了不必要的重复项 问题 代码多次附加按钮，而按钮只应附加一次。如何阻止倍数 （li）st项显示在ul样式的表格中，如下所示（编号是任意的，我仅将其用于参考）： |1 | 2 | |3 | 4 | |5 | 6 | 它给出了清单4，1个按钮 它给出了清单1，2个按钮 它给出了清单2、3个按钮 是从右到左从上到下吗？如果是，为什么？ 我试图实现的目标：

我已经通过这个JavaScript成功地实现了大部分所需的功能，但仍然有一个潜在的麻烦bug我无法解决：我编写的代码附加了所需的HTML，但创建了不必要的重复项

问题 代码多次附加按钮，而按钮只应附加一次。如何阻止倍数

（li）st项显示在ul样式的表格中，如下所示（编号是任意的，我仅将其用于参考）：

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

  • 它给出了清单4，1个按钮
  • 它给出了清单1，2个按钮
  • 它给出了清单2、3个按钮
是从右到左从上到下吗？如果是，为什么？

我试图实现的目标： 阶段1-检查视频并添加按钮（如果存在视频）
  • 检查此类别页面上的产品列表，查看是否有“.Options”
  • 如果有.Options，请检查/Videos/文件夹中是否存在与此产品ID匹配的视频
  • 如果视频文件夹中存在具有匹配产品ID的视频，请将播放/停止切换按钮附加到产品列表
    • 第2阶段-按按钮播放/停止视频
  • 如果按下播放/停止按钮，则添加带有相关视频URL的标签
  • 如果正在播放视频，按下按钮后停止并隐藏视频
    • JavaScript 
    $（'.videoDemoBtn'）。在（'click'，函数（）{
if（$（this）.hasClass（'videoPlaying'））{
$（this.removeClass（'videoPlaying'）；
$（this.parent（）.find（'div.categoryDemoVideo'）.hide（）.html（“”）；
}
否则{
var ProductId=$（this.parent（）.find（'div.ProductImage'）.attr（'data-product'）；
$（this.addClass（'videoPlaying'）；
$（this.parent（）.find（'div.categoryDemoVideo'）.show（）.html（“您的浏览器不支持此视频。请升级您的浏览器！
    ”）；
}
});
$（“.Options”）。每个（函数检查视频（url）{
var ProductCatOpt=$（此值）；
ProductId=$（this.parent（）.parent（）.find（'div.ProductImage'）.attr（'data-product'）；
函数ajax1（）{
返回$.ajax（'/content/videos/'+ProductId+'.mp4'））
.done（函数（）{
$（ProductCatOpt）.addClass（'withVideo'）；
}).fail（函数（）{
返回；
});
}
$.when（ajax1（））.done（函数（a1）{
$（'.withVideo'）。最近（'li'）。追加（''）；
});
});
    HTML 
      

    • 

    • 

    • 

    • 

    • 

    •
    我已经做了一个测试，但是没有帮助，因为必须使用ajax检查的视频必须在同一个域中才能工作，并且ProductID是由我使用的平台的PHP动态生成的

    我特别希望停止导致添加多个按钮而不是仅添加1个按钮的行为，但是，如果我的代码过于草率和低效，我不会感到惊讶，因此请随时批评其中的任何部分。

    每次收到AJAX响应时，您正在向所有
    .videoDemoBtn
    元素添加另一个单击处理程序。因此，下次单击其中一个时，它将多次运行处理程序，从而添加HTML的多个副本

    您应该在顶层执行所有事件绑定。因为这些是动态添加的元素，所以应该使用事件委派，如中所述

    要处理动态元素，您需要绑定到预先存在的元素，并将事件处理委托给该元素

    改变

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

    [更新]

    对于重复按钮的问题，您很可能需要更改

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

    $（'.withVideo'）。最近（'li'）。追加（''）；
    到

    ProductCatOpt.closest（'li'）。append（''）；
    通过这种方式，您只需将元素附加到相关产品，而不是页面中的所有
    。withVideo
    元素。

    这样我才能正确理解：1。使用on（）而不是单击，因为动态添加了已处理的事件。videoDemoBtn 2。将$（'.videoDemoBtn'）放在（）上{…在ajax函数之前。正确吗？还有，我什么时候才能将你的答案标记为正确？因为我对这方面一无所知，我是否先尝试你的答案，然后报告/标记？是的，我认为你理解正确。当你认为你能够正确使用答案时，你应该将其标记为正确。如果你遇到问题，你可以把你的尝试作为问题的补充，我会尽力帮助你应用解决方案 
    $('.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>');