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

Question

我正在使用彩盒。

用户需要点击两次才能打开彩盒并在打开的 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>

可能是我在第一次单击时创建颜色框并在第二次单击时打开它。但不知道如何解决。

感谢您的帮助...

Answer 1

就像@skobaljic 所说，删除多余的click 处理程序。

然后关于音频加载，我认为问题是由于您传递的href 选项中的$(this)。选项包含在一个对象中......当插件真正执行$(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>