colorbox - 按钮需要单击两次才能触发 onclick

如何解决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>