Why is jquery toggle not working?

Question

I simply want to have a variable toggle between true and false and have the text on the button clicked to change as well. Here is my Jquery:

$("button").toggle(
  function () {
    $(this).text("Click to change to paint brush");
      var erasing = true;
  },
  function () {
    $(this).text("Click to change to eraser");
      var erasing = false;
  }
);

This looks 100% sound to me, but in my jsfiddle you will see that it is toggling the existence of the button before I can even click it! Why is this happening and how can I fix it?

That toggle version was changed in jquery 1.8 - http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone — mplungjan, Jun 23 '13 at 05:11

PSL · Accepted Answer · 2013-06-23T05:46:14.607

3

This version of toggle has been deprecated (1.8) and removed (1.9). Now you need to handle it in button click itself. Somthing like this:

var erasing = false;
$("button").click(function () {
    erasing = !erasing;
      $(this).text(function (_, curText) {
          return curText == "Click to change to paint brush" ? "Click to change to eraser" :  "Click to change to paint brush" ;
      });
    console.log(erasing);
  });

Fiddle

Plus if you want to preserve the value of the variable just define them out of the click event scope, so that it is more global to be accessed outside.

See

edited Jun 23 '13 at 05:46

answered Jun 23 '13 at 05:11

PSL

123,204
21
253
243

This works 3 times...I solved the problem with an if statement once you said that toggle doesn't work – Ryan Saxe Jun 23 '13 at 05:20
@RyanSaxe Thats because of a typo.. Eraser in the code. :) Its in your code as well. – PSL Jun 23 '13 at 05:21
@RyanSaxe yes thats because of the logic. If you invert the condition it will still work. – PSL Jun 23 '13 at 05:23
Yes, I like your method...even though I posted a solution that works, this is a good way. – Ryan Saxe Jun 23 '13 at 05:25
@RyanSaxe See my update; ditch all those variables, conditions. You can use ! to invert boolean and text's function to flip the button text. – PSL Jun 23 '13 at 05:26
I see. I will mark your answer as correct then as it is more efficient than mine – Ryan Saxe Jun 23 '13 at 05:28
I'd wrap that whole thing in a closure to prevent that `erasing` variable from going global. – mpen Jun 23 '13 at 06:32

score 1 · Answer 2 · answered Jun 23 '13 at 05:21

Thank you all for explaining how toggle is out of date...so that is all I needed and then I solved my problem with a simple if statement:

var erasing = false;
var i = 0
$("button").click(function () {
    if(i%2==0){
        $(this).text("Click to change to paint brush");
        erasing = true;
    }
    else{
        $(this).text("Click to change to eraser");
        erasing = false;
    };
    i += 1
  });

jsfiddle

score 0 · Answer 3 · answered Jun 23 '13 at 05:14

As PSL said, the toggle you're looking for is gone and lost. if you want a click and hold solution (as your title suggests), you could look at using mouseup and mousedown.

 var erasing;
 $("button").on({
    "mousedown": function () {
        $(this).text("Click to change to paint brush");
        erasing = true;
    },
    "mouseup mouseleave": function () {
        $(this).text("Click to change to eraser");
        erasing = false;
    }
});

Demo : http://jsfiddle.net/hungerpain/ymeYv/6/

This does not work because it does not toggle between them on click. Also, the hold thing was for a different question, I must have been in the wrong tab — Ryan Saxe, Jun 23 '13 at 05:20

Why is jquery toggle not working?

3 Answers3

Fiddle

jsfiddle