jquery .addClass to set up another function using new class

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.

You did a great job setting the stage, but I'm having trouble understanding exactly what the question is — thewebguy, Sep 30 '12 at 06:02
In short, I was trying to add a class to a list item after a click event on my canvas. — metamlkshk, Sep 30 '12 at 06:31

mbinette · Accepted Answer · 2012-09-30T05:01:51.710

3

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).

edited Sep 30 '12 at 05:01

answered Sep 30 '12 at 04:50

mbinette

5,094
3
24
32

1

Scroll a bit more: _As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live()._ Basically `live` has no use anymore. – elclanrs Sep 30 '12 at 04:53
Thank you for your help. It works with .live but not .on. Are further edits required with the use of .on? I'm using 1.8.1 – metamlkshk Sep 30 '12 at 04:55
Well, yeah technically it can still be used, but even if `on` is not available `delegate` probably is unless jQ version is really old. – elclanrs Sep 30 '12 at 04:57
Point given for `delegate`. @metamlkshk: See the link at the end of the post. – mbinette Sep 30 '12 at 04:58
1

@metamlkshk - you have to use the dynamic form of `.on()` (not the static form) as described here: http://stackoverflow.com/questions/9985090/jquery-on-does-not-work-but-live-does/9985137#9985137 – jfriend00 Sep 30 '12 at 05:10
1

@jfriend et al. Thanks. Got it working with $(document).on('mousedown','.new_file', function(){etc}); Live seemed so much easier :) – metamlkshk Sep 30 '12 at 05:22
1

@metamlkshk - `.live()` is simpler, but is less flexible and can have performance issues, particularly if used a lot. There are good reasons not to use it any more and to learn how to use `.on()` efficiently. – jfriend00 Sep 30 '12 at 05:43

jquery .addClass to set up another function using new class

1 Answers1