Views pagination, jquery and ajax error

Question

I have emerged me a problem with a page view and maybe someone can help me solve. Following this tutorial: http://codekarate.com/daily-dose-of-drupal/multiple-views-part-3 I created a view showing a content in 2 ways (such as poster and poster with text). For this purpose uses a javascript file that is responsible for displaying two different ways the contents of the view. Everything worked fine until add a pager and save the view with ajax enabled. Suddenly everything stopped working. It works only on the first page, if you press the Pager (with ajax) the next page and nothing works. The script is as follows:

---

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {
  attach: function(context, settings) {
//Sets default class for course views and toggles class when changing view.
$('#content').once('course-view', function() {
  if ($(".view").hasClass("course-view")) {
    $(".view").addClass("grid-view"); // Sets .grid-view as default class on the view

    $(".list").click(function() {      
      if ($(".view").hasClass("grid-view")) {
        $(".view").addClass("list-view"); // adds .list-view to the view class
        $(".view").removeClass("grid-view"); // removes .grid-view from the view class
      }
    });

    $(".table").click(function() {
      if ($(".view").hasClass("list-view")) {
        $(".view").addClass("grid-view"); // adds .grid-view to the view class
        $(".view").removeClass("list-view"); // removes .list-view from the view class
      }
    });
  }
});

  }

    };


})(jQuery, Drupal, this, this.document);

Can somebody help me? Why only works on the first page?

Answer 1

Views Ajax is same as the Drupal Ajax, ajax response also run the behaviors.

What you need to do is removing the once() because it will stop your event binding for the second time. For preventing the event bound twice due to the ajax, just remember to add context as scope when you search for the element with jQuery.

(function ($, Drupal, window, document, undefined) {

Drupal.behaviors.my_custom_behavior = {

  attach: function(context, settings) {

    // Sets default class for course views and toggles class when changing view.
    // Context is important here for limiting the scope.
    var view = $(".view", context);

    if ( view.hasClass("course-view") ) {
      view.addClass("grid-view"); // Sets .grid-view as default class on the view

      $(".list", view).click(function() {      
        if (view.hasClass("grid-view")) {
          view.addClass("list-view"); // adds .list-view to the view class
          view.removeClass("grid-view"); // removes .grid-view from the view class
        }
      });

      $(".table", view).click(function() {
        if (view.hasClass("list-view")) {
          view.addClass("grid-view"); // adds .grid-view to the view class
          view.removeClass("list-view"); // removes .list-view from the view class
        }
      });
    }
  }
};

})(jQuery, Drupal, this, this.document);