Home/ Questions/Q 7852571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T19:27:23+00:00

I’d like to be able to dynamically load an external javascript file, and then

  • 0

I’d like to be able to dynamically load an external javascript file, and then bind methods from the script to specific elements in the DOM. Is that possible? How? With what constraints?

I imagine a solution would look something like this, but I’m open to anything that will work:

<html><body>
  <div class="A">aaaaa</div>
  <div class="B">bbbbb</div>
  <div class="A">aaa</div>
</body></html>

<script type="text/javascript">
  //This is the internal script, part of the original page
  $.get("url/outside_script.js",
    function(script_obj){
      $(".A").bind('niftyMethod', script_obj.niftyMethod)
    }
  );
</script>

Here’s the external script: outside_script.js

<script type="text/javascript">
  var script_obj = {
    niftyMethod : function(){
      //Do cool stuff in the context of a DOM object.
      $(this).fadeOut(500,function(){$(this).fadeIn(500)});
  }
</script>

I’ve done a good bit of Googling on this, but haven’t found much. Maybe I’m using the wrong search terms…?

NB: I’m happy to use jquery if that’s what it takes.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Some corrections:

    Script:

    <script type="text/javascript">

    //add script to page
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = "url/outside_script.js";
    $('body').append(script);

    //on document ready, bind your function
    $(function(){
        $(".A").bind('click', script_obj.niftyMethod)
    });

</script>

    External file:

    var script_obj = script_obj || {
    niftyMethod : function(){
      //Do cool stuff in the context of a DOM object.
      $(this).fadeOut(500,function(){$(this).fadeIn(500)});
  }
    • 0