位于辅助/非默认jQuery选项卡内时,zeroclipboard元素不起作用

Question

我有一个带有jQuery选项卡的页面,我正在尝试将辅助选项卡内的div元素与zeroclipboard链接.不幸的是,它不起作用,因为我怀疑在加载页面时最初隐藏了辅助选项卡.

html如下:

<span id="form" class="tabs tabs-normal grid100">

   <!-- HEADER BUTTONS -->
   <div class="row_btns_header">
      <button class="btn_neutral">Cancel</button>
      <button class="btn_primary last save">Save</button>     
   </div>

   <!-- TABS -->
   <div class="row">
      <ul id="tabs-list">
        <li><a href="#blog">Blog</a></li>
        <li><a href="#links">Links</a></li>
        <li><a href="#images">Images</a></li>
        <li><a href="#more">More..</a></li>
      </ul>
   </div>

   <!-- DEFAULT TAB -->
   <div id="blog" class="container">

   </div>

   <!-- LINKS TAB -->
   <div id="links" class="container">
        <div id="embed" style="position: relative">
           <a href="#">Copy into the clipboard</a>
        </div>
   </div>

   <!-- etc. -->

javascript是:

$(".tabs").tabs();

$("#embed").zclip({
        path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
        copy: "aaaaaaaaaaaa"
    });

如果我在#blog div中移动#embed div,则zeroclipboard可以正常工作.我怀疑这是因为#blog默认是可见的.

有什么想法,当zeroclipboard元素位于辅助非默认选项卡内时,我需要做什么才能使zeroclipboard元素工作？

非常感谢.

巴尔迪

Answer 1

我意识到这是一个老线程,但希望这有助于那里的人.

我遇到了同样的问题,我想出的解决方案是将zclip对象的创建绑定到与所需触发按钮/链接相关联的mouseover事件.此外,为了防止脚本在每次发生鼠标悬停事件时重新初始化zclip对象,只需在第一次调用它时将其关闭.这是一个例子:

HTML:

<input type='text' value='Text being copied.'/> <input type='button' class='clipcopy' value='Copy'/>

Javascript:

$(document).ready(function(){


    $(".clipcopy").on('mouseover', function(){

        //turn off this listening event for the element that triggered this
        $(this).off('mouseover');

         //initialize zclip
        $(this).zclip({
            path: "js/zclip/ZeroClipboard.swf",
            copy: function(){return $(this).prev().prop('value');}
         });

     });
 });

希望能帮助到你!