单击打开模式的按钮后触发单击 DIV
Posted
技术标签:
【中文标题】单击打开模式的按钮后触发单击 DIV【英文标题】：Trigger Click on a DIV after Click on a Button which opens a Modal 【发布时间】：2018-07-05 09:48:42 【问题描述】：我有一个包含很多帖子的循环，每个帖子都有一个视频模式，在点击 <button></button> 元素后打开。按钮下方是模态框的 html 部分。要自动播放视频（打开模式后），我需要使用 classclass="start" 触发对 div 元素的点击。这是设置
<button class="btn btn-default" id="video-modals-loop" data-toggle="modal" data-target="#001">Play Video</button>
<div class="modal loop-video-modals" id="001">
<div class="modal-dialog">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button">Close</button>
</div>
<div id="#product-video">
<div class="start" data-src="https://t-e-s-t.com/"></div>
</div>
</div>
</div>
我已经尝试过
$(document).on('click', '#video-modals-loop', function()
$(this).closest("#video-modals-loop").find(".lazyframe").trigger('click');
);
但惨遭失败。 知道如何在上述 div 上打开模式后触发点击吗？
编辑：它是一个引导模式，每个模式的起始 div 都是独立的。
【问题讨论】：
这是您自己的自定义模态处理还是您在使用库？此外，.start div 是为每个模态视频分开还是只有一个（全局）.start？
如果你在台式机上尝试这个没关系，但它不会在移动设备上工作，因为移动设备不支持自动播放，请注意
@Junaid - 它是一个引导模式。是的，每个模态的起始 div 都是单独的。谢谢
【参考方案1】：
在阅读了有关.closest() 和以下answer on *** 的jQuery 文档后，我能够解决我的问题。以下代码工作正常。希望这对其他人也有帮助。
$(document).on('click', '#video-modals-loop', function()
$(this).closest('div').find('.start').click();
// IF needed you can use a timeout to delay the click event
// setTimeout(function()
// $(this).closest('div').find('.start').click();
// ,1);
return false;
);
【讨论】：
【参考方案2】：如果你在桌面上尝试这个没问题，但它不会在移动设备上工作，因为移动设备不支持自动播放，请注意
https://www.tutorialrepublic.com/codelab.php?topic=faq&file=autoplay-youtube-video-within-bootstrap-modal
还有一件事，下面的代码在这里不能正常工作，因为我们的 sn-p 输出窗口也可以用作移动/小型设备，只需复制代码从您的系统运行它就可以正常工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Autoplaying YouTube Video inside Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example
margin: 20px;
.modal-content iframe
margin: 0 auto;
display: block;
</style>
<script type="text/javascript">
$(document).ready(function()
/* Get iframe src attribute value i.e. YouTube video url
and store it in a variable */
var url = $("#cartoonVideo").attr('src');
/* Remove iframe src attribute on page load to
prevent autoplay in background */
$("#cartoonVideo").attr('src', '');
/* Assign the initially stored url back to the iframe src
attribute when modal is displayed */
$("#myModal").on('shown.bs.modal', function()
$("#cartoonVideo").attr('src', url);
);
/* Assign empty url value to the iframe src attribute when
modal hide, which stop the video playing */
$("#myModal").on('hide.bs.modal', function()
$("#cartoonVideo").attr('src', '');
);
);
</script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">YouTube Video</h4>
</div>
<div class="modal-body">
<iframe id="cartoonVideo" src="//www.youtube.com/embed/YE7VzlLtp-4?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html> 【讨论】：
谢谢，但我有超过 70% 的用户使用手机——这样的解决方案不是我想要的。谢谢以上是关于单击打开模式的按钮后触发单击 DIV的主要内容，如果未能解决你的问题，请参考以下文章