Dynamically adding a script/function block in jquery

EDITED:

Just wondering if is it possible to add a function (or static script) block or a variable to body of html.

Something like this,

$('body').add(function(){/../}) 

or

$('body').append('<script></script>')

or

$('body').fn.myFunc = function(){}

Is it correct to use .extend instead?

One example is if I us开发者_JAVA百科e ExternalInterface, my callbacks have to be statically defined in body/html/js but not in $().ready function unless I have a var defined globally and refer it in $().ready function.

I overlooked this requirement, and thats where I wanted to add dynamic callback functions.

• To create a script tag in your markup

  $('<script/>', {
      type:    'text/javascript',
      src:     'http://...'
  }).appendTo(document.body);
  

• To extend jQuery use

  $.fn.yourmethodname = function(){
  });
  

There is a method $.getScript(), you can use that too.

Example:

<script>$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: 'pink' }, 1000)
      .animate( { backgroundColor: 'blue' }, 1000);
  });
});</script>

You can pretty much attach a function to almost anything in Javascript, it really doesn't care.

In your last option, the fn object has to exist on the body DOM object before you can attach more functions to it.

Something like this would work:

$(function() {
    $('body')[0].fn = function() {};
    $('body')[0].fn.myFunc = function() { alert('Yay function'); };
});

Or, if you just want the functions right on the body element:

$('body')[0].myFunc = function() { alert('Yay function'); };

Make sure you include the [0] bit on the end of $('body'), or you will be attaching your function to a JQuery object that wraps the body DOM object. I don't think you can be assured that every time you call $('body') you will get the exact same JQuery object.

I feel your pain. But then I had such a debug nightmare with runtime script additions that I decided on another method.

This is an example of how I work it, in this case using buttons.

Instead of having static menu buttons in the code, I put a single button function and use runtime info to let my php know what button it is responding to and any page parameters your application needs. This is likely to be a minimum of a page id and section id. Not a button id, because the purpose of this method is to allow dynamic addition of buttons. Only your php needs to alter it's action for any additional buttons you add.

  <script type="text/javascript"  >
  $(document).ready(function(){
  $("button").click( function() {
         $.get( "/menu_to_body_respond.php", {
        pageId: $thisPageId
        subSecID: $thisSubID
        }, function( resp ) {
            $("#left_body").html(resp);
            });
  });
 });
</script>

Then do what ever you want with the section in your php function menu_to_body_respond.php

<?php
$pageIDVal = $_GET[ 'thisPageId'];
$subIDVal =  $_GET[ 'thisSubId'];

// code to decide what to do with this button press
// switch statements do a good job, if your 
// application has a lot of items you might want to respond to
//just put the most used items at the beginning of the switch.

//tmp code to give you a response
$outStr = $pageIDVal . " Left Body B2";
echo($outStr);
?>

You can of cause mix it up, have buttons that are responded to locally such as the general menu open/collapse and basic client side work. Just have the id named buttons first, and if one of those could respont they stop the $('button') running simply with an if-else statement.