Question

I’m working on a drawing app and running into some trouble with the use of .addClass.
What I’m trying to do is send a new class to a menu item that I can then use to run a function which clears my canvas. I can make the list item invoke the function on its own when the class is preset to ‘new_file’, but I would like to have it inactive until some drawing is done on the canvas. My idea was to use .addClass when a mousedown is detected on the canvas, but it’s not working out as planned. Other ideas for how to accomplish this are encouraged as well. Here’s some code:

This code from my canvas.js file clears the canvas when the list item with class ‘new_file’ is clicked.

    $(document).ready(function(){
       $('.new_file').mousedown(function(){
          clearCanvas(); 
       });

       function clearCanvas(){
          context.clearRect(0, 0, canvas.width(), canvas.height());
       }
    });

This is what I tried for adding the class; it’s in my ‘head’ for now:

    <script>
       $(document).ready(function(){
           $("#myCanvas").click(function() {  //tried .mousedown; did nothing
               $("#clear").addClass("new_file");
           });
       });
    </script>

This is the list item I’m trying to manipulate:

    <li id="clear">Clear</li>

And my canvas:

    <canvas class="canvaso" id="myCanvas" height="239" width="414"></canvas>
    <script type="text/javascript" src="canvas.js"></script>

I tried testing various edits while observing firebug but it seems like “new_file” isn’t being added to the list item. Also tried changing #myCanvas and testing other IDs on the page but still couldn’t get new_file added. Stumped.

Answer 1

Try to use live. That way, when you add classes to an element, they are automatically binded to your function.

$('.new_file').live('mousedown', function(){
    clearCanvas(); 
});

If you are using jQuery 1.7+, use on instead of live (as it is now deprecated).