How to call a script embedded into a HTML element

Question

Having the following html:

<div id="plugin">
 <script>
  (function(){

     this.do = function(e){
       alert("cool!");
     };
  });
 <script>
<div>

how do I call this.do (say from a parent element click button event handler)?

Maybe some more information will help advising on the right solution. It's a plugin, I want both markup and script to be part of the same file. I also want to be able to do something like:

$("#plugin").*controller*.do(); from outside of the plugin.

Here's a candidate solution, inspired by Scott's answer:

<div>
 (function(){
   var plugin = $("#plugin");

   plugin.do = function(e){ alert("cool!"); };

 });
</div>

then from outside:

   $("#plugin").do();

any issues with it?

you just completely changed the context of the question with that edit — Scott Selby
– Scott Selby, Commented Jun 18, 2014 at 16:16
@Scott Sorry if it looked like it, in fact it was probably lack of description from the beginning. I love your proposal though. — user3455395
– user3455395, Commented Jun 18, 2014 at 16:21
You really should have a look at the jQuery manual on how to create plugins and plugin functions: learn.jquery.com/plugins/basic-plugin-creation — feeela
– feeela, Commented Jun 18, 2014 at 16:22
man, what I'm trying to do has got nothing to do with jQuery plugins, not everything called 'plugin' is a jQuery plugin, right?;) — user3455395
– user3455395, Commented Jun 18, 2014 at 16:25
@user3455395 - it looks like - i'd be willing to bet you're plugin depends on jQuery - now even if I'm wrong , what does it hurt to make your new additional functionalitly better written to accept and return jquery objects? your "plugin" will be better if you follow the guidelines of creating a jQuery plugin function. Even if this one you're talking about doesn't — Scott Selby
– Scott Selby, Commented Jun 18, 2014 at 16:30

feeela · Accepted Answer · 2014-06-18 16:15:58Z

This looks like you can't, as the wrapper function doesn't have a name and does not self-execute. So the code never runs. If it would run, the this keyword in a global function refers to the window object and the inner function would be globally available.

(function(){

    this.do = function(e){
        alert("cool!");
    };
})(); // <-- additional parentheses to self-execute the wrapper function

window.do === do; // true

// use
do();
// or
window.do();
// to call the inner function

But having such a wrapper function looks like you want to avoid global functions and variables (which is good for a number of well documented reasons). In that case you could define do as private method of your module and refer to it inside the wrapper function.

(function(){

    var do = function(e){
        alert("cool!");
    };

    var button = document.querySelector( 'button' ); // get the first button element
    button.addEventListener( 'click', do, false );

})();

typeof do === 'undefined' // true; the function do is only available inside the wrapper function.

Scott Selby · Accepted Answer · 2014-06-18 16:11:01Z

1

why are you against just doing?

 <script>
   function do(){
      alert('cool!');
   }
 <script>

you could do :

<script>
   window.do = function(){
      ...
   }
</script>

then some where else:

window.do()

answered Jun 18, 2014 at 16:11

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

5 Comments

user3455395 Over a year ago

could I lower the scope to the plugin itself by using $("#plugin").do = function(){} - surely I should be able to call $("#plugin").fo after it?

Scott Selby Over a year ago

now you want to add a function to jQuery , that can be performed on any jQuery object - you completely changed what you were trying to do , I'll make a solution for that for you

Scott Selby Over a year ago

you know you can chain Jquery functions ?? .hasClass().css().removeClass() - it's because all of those functions are expecting and returning the same thing . You should just google adding function to jQuery plugin - that is probably a more appropiate answer for you.

user3455395 Over a year ago

it's not a jQuery plugin it's a plugin in concept, something which lives on its own but can be loaded and manipulated...

Scott Selby Over a year ago

it sounds like... just going off on a limb here , it depends on jQuery , hence me calling it a jQuery plugin , I think Google can help here

Quentin · Accepted Answer · 2014-06-18 16:09:08Z

0

You can't. The outer function expression isn't called or assigned anywhere, so it will be discarded without ever evaluating the inner function expression.

If you want to bind the function somewhere, call addEventListener on the element you want to assign it to and pass it as the second argument.

answered Jun 18, 2014 at 16:09

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

How to call a script embedded into a HTML element

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related