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 ?

Answer 1

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.