单击按钮时如何加载 jQuery？ [复制]答案

【问题标题】：How do I get jQuery to load when clicking a button? [duplicate]单击按钮时如何加载 jQuery？ [复制]
【发布时间】：2014-02-10 07:11:20
【问题描述】：

单击按钮后如何加载 jQuery。到目前为止，它在页面加载时加载。我希望它在单击按钮后加载！我尝试了很多东西，但到目前为止它们都没有奏效，请帮助...

这是我到目前为止的代码

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
   $(document).ready(function(){
      $("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
         function(){$("#login_error").hide();}});
   });
</script>

【问题讨论】：

你不需要一遍遍地重复这个问题

标签： javascript jquery fancybox fancybox-2

【解决方案1】：

如果您想在单击按钮时动态加载 jQuery（如果您解释了“为什么”要这样做会有所帮助），那么您可以使用这样的函数来加载它：

function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}

请注意，在加载 jQuery 之前，您的其他 jQuery 代码无法运行。您的代码可能如下所示：

<a href="#image_link" title="PutLockerMedia" id="click">watch</a>
<div style="display:none">
  <div id="image_link">
    <div class="imageWrapper">
      <div class="image"> 
    <iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
function loadScript(sScriptSrc, oCallback) {
    var oHead = document.getElementsByTagName('head')[0];
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sScriptSrc;
    // most browsers
    oScript.onload = oCallback;
    // IE 6 & 7
    oScript.onreadystatechange = function() {
        if (this.readyState == 'complete') {
            oCallback();
        }
    }
    oHead.appendChild(oScript);
}
function jQueryLoaded() {
      $("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
         function(){$("#login_error").hide();}});
   });
}

document.getElementById("myButton").addEventListener("click", function() {
    // load jQuery and when it's loaded, call jQueryLoaded
    loadScript("jquery.js", jQueryLoaded);
}, false);

</script>

其他参考答案：

How to know if JQuery has finished loading

Javascript multiple Dynamic Insertion

【讨论】：

【解决方案2】：

试试这个

<script type="text/javascript"> 
    $(document).ready(function(){ 
         $("#click").click(function fancybox(){
                          'scrolling': 'no',
                          'titleShow': false,
                          'onClosed': function(){
                                         $("#login_error").hide();
                                      }
         }); 
    }); 
</script>

【讨论】：