Question

I have a toggle event that is being used to show and hide a div and it is hooked up inside a backbone view and called via an event delegate. On the first click of the link toggle() is skipped. On the second and third click toggle() is called as expected.

Any ideas how I can get the toggle event working on first click?

events:{
    "click a.docSectionHeading" : "Expand" 
  },

  initialize: function(options) {
    _.bindAll(this, "render", **"Expand"**);
    this.model.bind("change", this.render);      
    this.model.fetch();
  },

  render: function() {    
    var $el = $(this.el);
    $el.empty();
    $el.append(this.template.to_html({
      message: this.model.get("message")  
    }));

    return this;
  },

  Expand: function() {

    var tempid = "";
    var id = "";

    // Not called on first click
    $("a.docSectionHeading").toggle(
      function () {

        tempid = $(this).attr("data-id");
        id = tempid.replace(".", "\\.");

         // show -, hide +
        $("img#doc_minus_" + id).removeClass(".noShow");
        $("img#doc_minus_" + id).show();
        $("img#doc_plus_" + id).hide();

        // show clicked section.
        $("#" + id).show();
      },

      function(){
        tempid = $(this).attr("data-id");
        id = tempid.replace(".", "\\.");

         // show -, hide +
        $("img#doc_minus_" + id).addClass(".noShow");
        $("img#doc_minus_" + id).hide();
        $("img#doc_plus_" + id).show();

        // show clicked section.
        $("#" + id).hide();
      }
    )

    return false;
  }

Answer 1

jQuery toggle binds the click-toggle behavior so the first time you click it the event for handling toggle gets bound but doesn’t get triggered as it wasn’t bound yet and nothing happens, that’s why it works on the second click. Another problem here is that now every time you click you bind the event again and again which will make the event trigger multiple times over time and it can produce all different kind of hard to track errors + performance will suffer.

To fix that you need to bind the toggle event in the render method after you’ve rendered the template or create a helper method bindToggle or something like that and call it from render method after you’ve rendered the template.

edit: and some tips

• it’s a broadly accepted standard that we start name of the methods with lowercase and name of classes/constructors with uppercase – this might be confusing for other programmers.
• you use empty and then append – it is an equivalent of jquery html it will empty and then append your html/DOM nodes
• if you bind an event to element you don’t need to query for it again you can get it from the event object using $(event.target)
• if you are using Backbone 0.9+ you don’t need to use $(this.el) to get jquery object representing the element you can just use cached copy of the jquery wrapped element by accessing this.$el
• also if the element you are querying for is a child of the current view’s element then it’s more efficient to use the backbone this.$ method (this.$('a.docSectionHeading')) as it is much more efficient as this will search for the element only in the children of the current element. Also it allows you to query for elements which weren’t added to the document DOM tree yet.

ps. and hope that the **"Expand"** in the bindAll is just an error? what are the stars for?

Fixed code:

initialize: function(options) {
  _.bindAll(this, "render");
  this.model.bind("change", this.render);      
  this.model.fetch();
},

render: function() {    
  var $el = $(this.el);
  $el.empty();
  $el.append(this.template.to_html({
    message: this.model.get("message")  
  }));

  this.bindExpand();

  return this;
},

bindExpand: function() {

  var tempid = "",
      id = "";

  this.$("a.docSectionHeading").toggle(
    function () {

      tempid = $(this).attr("data-id");
      id = tempid.replace(".", "\\.");

       // show -, hide +
      $("img#doc_minus_" + id).removeClass(".noShow");
      $("img#doc_minus_" + id).show();
      $("img#doc_plus_" + id).hide();

      // show clicked section.
      $("#" + id).show();
    },

    function(){
      tempid = $(this).attr("data-id");
      id = tempid.replace(".", "\\.");

       // show -, hide +
      $("img#doc_minus_" + id).addClass(".noShow");
      $("img#doc_minus_" + id).hide();
      $("img#doc_plus_" + id).show();

      // show clicked section.
      $("#" + id).hide();
    }
  );
}