Call javascript function without inline event

Question

I am trying to highlight cells with user preferred colors. A user will select a cell and drag mouse to select multiple cells that they want to color with the selected color. How can I trigger the javascript function that lives in a separate file (i know I have to include the file to html file, I have done that already) when user click and drag the mouse without using inline event handlers.

The code is there to drag and select but I would like to call this function when user click and drag cells. Before I was using google.setOnLoadCallBack to call this function, but that would call it only once. I would like user to have multiple selections. I hope I made sense.

HTML

<section id="importance">
   <label class="green">Green</label>
   <input type="radio" name="importance" value="green">

   <label class="yellow">Yellow</label>
   <input type="radio" name="importance" value="yellow">

   <label class="orange">Orange</label>
   <input type="radio" name="importance" value="orange">

   <label class="red">Red</label>
   <input type="radio" name="importance" value="red">
</section>

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
   <td>a</td>
   <td>b</td>
   <td>c</td>
  </tr>
  <tr>
    <td>d</td>
    <td>e</td>
    <td>f</td>
  </tr>
  <tr>
    <td>g</td>
    <td>h</td>
    <td>i</td>
  </tr>
</table>

Javascript

function select_multiple() {
  var isMouseDown = false;
  // id for all the cells that were selected at the same time
  var colorGroupId = Math.floor(Math.random() * 1000);
  var highlight = find_importance_color();
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass(highlight);
      $(this).attr("data-highlightedId", colorGroupId);
      return false; // prevent text selection
  })
  .mouseover(function () {
    if (isMouseDown) {
      $(this).addClass(highlight);
    }
  });

  $("#our_table td")
    .mouseup(function (event) {
    isMouseDown = false;
    // time_importance(event);
  });
}

function find_importance_color() {
    return $('#importance input[name=importance]:checked').val();
}

CSS

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.red {
  background-color: red;
}

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

Answer 1

Pass your initialization function to the jQuery ready handler:

$(document).ready(select_multiple);

jQuery will then call it when the document is loaded.

Answer 2

With the most basic of changes I believe what you are looking for is what I have done here:

http://jsfiddle.net/trakkasure/CtRYd/

// On ready function.
$(function(){
      var isMouseDown = false;
  // id for all the cells that were selected at the same time
  var colorGroupId = Math.floor(Math.random() * 1000);
  var remove = false;
  $("#our_table td")
    .mousedown(function () {
      var highlight = find_importance_color();
      isMouseDown = true;

      remove = $(this).hasClass(highlight);
      if (remove)
        $(this).removeClass(highlight);
      else $(this).addClass(highlight);
      $(this).data("highlightedId", colorGroupId);
      return false; // prevent text selection
  })
  .mouseover(function () {
    if (isMouseDown) {
      var highlight = find_importance_color();
      if (remove)
        $(this).removeClass(highlight);
      else $(this).addClass(highlight);
    }
  });

  $(document.body)
    .mouseup(function (event) {
    isMouseDown = false;
    // time_importance(event);
  });

  function find_importance_color() {
    return $('#importance input[name=importance]:checked').val();
  }
})

I removed the outer function call for select multiple, and adjusted the toggling of colors based on if the selected color is set or not.

You only need to create events once, so this should go in a jquery document ready handler.

Also, the mouse up event would not have been fired if the mouse was let up outside of the table. SO listening for the event on the document body will solve that.