Where has fn.toggle( handler(eventObject), handler(eventObject)...) gone?

Question

I have this jsfiddle

which uses toggle event - not to be confued with toggle - jQuery version set to EDGE

It suddenly stopped working and removed the cell I wanted as a trigger, since it obviously reverts to toggle.

I cannot find any deprecation tags or such

http://api.jquery.com/category/deprecated/ gives a 404

If I add the Migrate module my jsFiddle then works and I see the warning in the console (elaborated by https://github.com/jquery/jquery-migrate/blob/master/warnings.md as posted by Frédéric Hamidi)

I see Deprecate fn toggle and issue 24 and Ticket #11786 but not in places I would expect to see it.

What am I missing and where do I find the replacement and documentation for it?

NOTE: I understand the reason for deprecation, I just can't find official documentation for the deprecation

$('#tbl .xx').toggle(
  function() {
    $(this).siblings().each(function(){
      var t = $(this).text();
      $(this).html($('<input />',{'value' : t}));
    });
  },
  function() {
    $(this).siblings().each(function(){
      var inp = $(this).find('input');
      if (inp.length){
        $(this).text(inp.val());
      }
    });
  }    
);

Code in MIGRATE:

jQuery.fn.toggle = function( fn, fn2 ) {
  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
    return oldToggle.apply( this, arguments );
  }
  migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
  // Save reference to arguments for access in closure
  var args = arguments,
  guid = fn.guid || jQuery.guid++,
  i = 0,
  toggler = function( event ) {
    // Figure out which function to execute
    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
    // Make sure that clicks stop
    event.preventDefault();
    // and execute the function
    return args[ lastToggle ].apply( this, arguments ) || false;
  };
  // link all the functions, so any of them can unbind this click handler
  toggler.guid = guid;
  while ( i < args.length ) {
    args[ i++ ].guid = guid;
  }
  return this.click( toggler );
};

UPDATE I have asked if they could keep the code as fn.toggler so it is a rename instead of a remove

Answer 1

Deprecation of jquery .toggle() is now documented at api.jquery.com. I found a nice replacement for it at forum.jquery that I am now using. It works great :)

$.fn.toggleClick = function() {
  var functions = arguments,
      iteration = 0;
  return this.click(function() {
    functions[iteration].call();
    iteration = (iteration + 1) % functions.length;
  });
}

Usage:

$("#target").toggleClick(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

Edit Aug. 6, 2014: I reconsidered the original code and found that .apply is not the right thing to use. Changed that to .call with no args passed in.

Answer 2

You can find official documentation about toggle()'s deprecation in the list of warnings emitted by the jQuery Migrate plugin:

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

Cause: There are two completely different meanings for the .toggle() method. The use of .toggle() to show or hide elements is not affected. The use of .toggle() as a specialized click handler was deprecated in 1.8 and removed in 1.9.

Solution: Rewrite the code that depends on $().toggle(), use the minified production version of the jQuery Migrate plugin to provide the functionality, or extract the $().toggle() method from the plugin's source and use it in the application.

Answer 3

jQuery 1.9 isn't final yet. As per the upgrade guide:

"For now, this guide serves as an appendix to the standard jQuery API documentation, and those pages may not describe the behavior of version 1.9. Please be patient while we update the documentation for the individual pages at api.jquery.com to reflect the changes in 1.9."

In this case, we just haven't documented it yet. You SO folk are faster than us! Please file a documentation ticket here: http://github.com/jquery/api.jquery.com

Answer 4

The code that I use:

$('#example').click(function()
    {
    isClicked=$(this).data('clicked');
    if (isClicked) {isClicked=false;} else {isClicked=true;}
    $(this).data('clicked',isClicked);

    if(isClicked)
        {
        ...do stuff...
        }
    else
        {
        ...do stuff...
        }
    });

---

The optimized code (suggest by mplungjan) is:

$('#example').click(function()
    {
    $(this).data('clicked',!$(this).data('clicked'));

    if ($(this).data('clicked'))
        {
        ...do stuff...
        }
    else
        {
        ...do stuff...
        }
    });