loading js function from another file

Question

i have a javascript like that

$.fn.hasBorder = function() {   
  if ((this.outerWidth() - this.innerWidth() > 0) ||  (this.outerHeight() - this.innerHeight() > 0)){
        return true;
    }
    else{
        return false;
    }
};

function removeImage(){
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {

      if($(this).hasBorder()) {
          $(this).css("border", "");
          //you can remove the id from array if you need to
      }
      else {
         $(this).css("border", "1 px solid red");
         selectedImgsArr.push($(this).attr("id")); //something like this 
         alert(selectedImgsArr);
 }
   });

I load this script to my page. In order to use this script

i wrote this

div load="removeImage">

What it does not work ?

Do you have jquery included? Do you really have a div without a starting `<`? Are you getting any errors? Please take some pride in your question and provide more details than just the code. The HTML snippet where you include the JS would also be useful. — Gazler, Apr 16 '12 at 12:33

score 1 · Answer 1 · edited May 23 '17 at 11:56

1

You are thinking of the "onload" event. But that can only be used on the "body" element. And even if that worked you would have to write it like this "...="removeImage()".

There ware similar questions here on SO, this one explains how to put a "onload" on a "div".

edited May 23 '17 at 11:56

Community

1
1

answered Apr 16 '12 at 12:34

Jan Hančič

53,269
16
95
99

score 1 · Accepted Answer · answered Apr 16 '12 at 12:37

If you use load on your div you can't use document.ready on the script. Because if you do it that way what you are saying is: "On div load event register a listener that will execute when the page is ready". But… that event was fired before register the listener.

Also you can't use onload on a div, just on body.

In short, do it this way:

$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {
      if($(this).hasBorder()) {
          $(this).css("border", "");
          //you can remove the id from array if you need to
      } else {
         $(this).css("border", "1 px solid red");
         selectedImgsArr.push($(this).attr("id")); //something like this 
         alert(selectedImgsArr);
      }
  });
});

And remove the load="removeImage" from your HTML.

Not quite true: Registering a listener to document's ready event fires the listener immediately even after the original onload event has been triggered. — aefxx, Apr 16 '12 at 12:46

loading js function from another file

2 Answers2