javascript - colorbox - 按钮需要点击两次才能触发 onclick
问题描述
我正在使用彩盒。
用户需要单击两次才能打开颜色框并在打开的 iframe 中运行音频播放器...
<td data-label="Play Now">
<div data-id="<?php echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
<a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top" class="btn btn-success colorbox1">Play</a>
</div>
<script>
$(document).on("click", ".colorbox1", function(){
$('.colorbox1').colorbox({
href: $(this).data('url'),
iframe: true,
innerWidth: '95%',
innerHeight:'70%',
opacity : 0,
fixed:true,
escKey: false,
overlayClose: false,
onOpen: function() {
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 100 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(300);
});
}
});
});
</script>
</td>
可能是我在第一次单击时创建颜色框并在第二次单击时打开它。但不知道如何解决。
感谢您的帮助...
解决方案
就像@skobaljic 所说,删除click
多余的处理程序。
然后关于音频加载,我认为问题出$(this)
在href
您传递的选项中。选项包含在一个对象中......当插件真正执行时$(this).data('url')
,this
不再是.colorbox1
。
所以这应该工作:
<td data-label="Play Now">
<div data-id="<?php echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
<a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top" class="btn btn-success colorbox1">Play</a>
</div>
<script>
$('.colorbox1').colorbox({
href: $('.colorbox1').data('url'), // <-- use the right selector instead of this
iframe: true,
innerWidth: '95%',
innerHeight:'70%',
opacity : 0,
fixed:true,
escKey: false,
overlayClose: false,
onOpen: function() {
$('#cboxOverlay,#colorbox').css('visibility', 'hidden');
$('#cboxOverlay').css({
'visibility': 'visible',
'opacity': 0.9,
'cursor': 'pointer'
}).animate({
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 100 , function() {
$('#colorbox').css({
'visibility': 'visible'
}).fadeIn(300);
});
}
});
</script>
</td>
推荐阅读
- c - 从 Make 中的文件列表中编译每个文件
- reactjs - Typescript 和 MaterialUI 图标中的类型别名问题
- r - 无法使用 md 文件查看 GitHub 上的绘图
- python - Python 不在 CPanel 中运行/抛出错误
- javascript - Gatsby - 警告尝试导入错误:“css”不包含默认导出(导入为“样式”)
- javascript - 如何通过使用 django 单击 HTML 按钮来运行具有不同参数的脚本
- android - Android 外部存储文件夹(通过 SAF 创建)及其内容被清理器错误删除
- regex - 确保尾部斜杠的 nginx 位置正则表达式
- javascript - 如何使用 JavaScript 在画布元素上添加加载器?
- python - 分离模块时如何处理共享类?