简体   繁体   English

在JavaScript函数中调用JQuery函数

[英]Call JQuery function in JavaScript function

I got this JQuery code: 我得到了以下JQuery代码:

file: code.js 文件:code.js

 jQuery(function(){

        function renderSVG(){
            //Something
        };
 });

File: index.html 文件:index.html

<script>
      function mostrarOdonto() {
          renderSVG();
      };
</script>

But i got a problem here: http://i.gyazo.com/9550a64fc16c7570107706fb2162d84f.png in renderSVG() inside mostrarOdonto() "Uncaught ReferenceError: renderSvg is not defined" 但是我在这里遇到了一个问题:mostrarOdonto()内部的renderSVG()中http://i.gyazo.com/9550a64fc16c7570107706fb2162d84f.png “未捕获的ReferenceError:renderSvg未定义”

I tried $renderSVG(); 我尝试了$ renderSVG(); but doesnot work. 但不起作用。 Anyone can help me? 有人可以帮助我吗?

Thanks so much! 非常感谢!

PD: Sorry bad english PD:对不起英语不好

That is caused by javascript closures. 这是由javascript关闭引起的。 It is local within the jQuery call and not accessible outside. 它在jQuery调用中是本地的,而在外部则无法访问。 You can read more about it here: MDN Documentation 您可以在此处了解更多信息: MDN文档

You can declare objects outside of the jQuery function call to have it available globally. 您可以在jQuery函数调用之外声明对象,以使其全局可用。 ie: 即:

function RenderSVG(){
 //Do Stuff
}

jQuery(function(){
   RenderSVG();
});

This ensures that it is accessible outside the jquery scope or if you really need it within jQuery you can go the route of a jQuery Plugin a la: jQuery docs 这确保了它在jquery范围之外可以访问,或者如果您确实需要在jQuery中访问它,则可以采用jQuery插件的方法: jQuery docs

Example: 例:

(function( $ ) {
    $.fn.renderSVG = function( options ) {
       //Do Stuff with canvas since it would be referenced in this.
    }; 
}( jQuery ));

Then you can call it like: $('#mycanvas').renderSVG({/*options*/}); 然后,您可以像这样调用它: $('#mycanvas').renderSVG({/*options*/});

Update 1: 更新1:

You have to ensure when your code is called after loading jQuery and any plugins. 您必须确保在加载jQuery和任何插件后何时调用您的代码。 in your <head> tag you should put <script src=".../jquery.min.js"> or whatever your file for jquery is called followed by any plugin scripts ... src="jquery.svg.js" , then you put your code: 在您的<head>标记中,您应该放置<script src=".../jquery.min.js">或任何您要调用的jquery文件,然后加上任何插件脚本... src="jquery.svg.js" ,然后输入代码:

<script>
   function RenderSVG(){
   }

   //And most important is that you call it after it is ready. In this example
   //I use jQuery(window).load you can also use jQuery(document).ready
   jQuery(window).load(function(){
      RenderSVG();
   });
</script>

if it still doesn't work you have to ensure the library for the svg methods aren't doing something weird. 如果仍然无法正常工作,则必须确保svg方法的库没有做奇怪的事情。 To be sure we would have to know the library you are using. 为了确保我们必须知道您正在使用的库。

The function renderSVG() is a local function,since it is inside jQuery(function(){ } . It is valid only in that scope , So it is not accessible via other scopes. So try it like this. 函数renderSVG()是一个局部函数,因为它位于jQuery(function(){ } 。它仅在该范围内有效,因此不能通过其他范围访问。

<script>
      jQuery(function(){
         function mostrarOdonto() {
             renderSVG();
         };
      };
</script>

You can Do it in this way JSFIDDLE LINK 您可以通过这种方式做到这一点JSFIDDLE LINK

HTML: HTML:

 <input type="button" value="go" onclick=" mostrarOdonto();">

Scripts: 脚本:

 $.renderSVG = function() {
  alert("I am calling form jquery");
 };

 $(document).ready(function() {
  alert("function is ready to use now");
 });

 function mostrarOdonto() {
      $.renderSVG();
  };

This should work as per your requirement. 这应该按照您的要求工作。 The Jquery part can go into your Code.js file. jQuery部分可以进入您的Code.js文件。

I think could help you it's simple and straight forward 我认为可以帮助您,这很简单直接

$(document).ready(function() {
 mostrarOdonto();

});

 function renderSVG() {
    alert("Testing purpose only");
};

function mostrarOdonto() {
    renderSVG();
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM