Handling events on dynamic HTML environment

[buguibu]

I'm using this plugin in an iPad web where i have to maintain my DOM as small as possible, so i have an base object where i instantiate this plugin and other objects that extend this one and are created on demand to user actions, for this OO stuff i use Fiber.

So my base class looks like this:

BaseArticle = Fiber.extend(function(){
    return {
//....
        init: function () {
//....
            this.$self.dragend({
                "minTouchDistance"  : "60",
                "keyboardNavigation": true,
                "pageContainer"     : ".slides-wrapper",
                "pageElements"      : "div.slide",
                "onSwipeStart": function () {
                    self.onSwipeStart.call(self, arguments[0]);
                },
                "onSwipeEnd": function () {
                    self.animateSlide(arguments[1].data("slide-n"))
                }
              });
        },
});

My problem was that event handling was never cleaned, so per each object that instantiate i have my handlers duplicated.

I've modified this plugin in this way that works for me:

    _observe: function() {
      this.container.hammer()
        .off( "drag")//Modified
        .on( "drag", this.settings.hammerSettings, $.proxy( this._onDrag, this ) )
        .off( "dragend")//Modified
        .on( "dragend", this.settings.hammerSettings, $.proxy( this._onDragend, this ) );

    swipe: function( direction ) {
      this.activeElement = this.pages.eq( this.page );

      // Call onSwipeStart callback function
      this.settings.onSwipeStart( direction, this.container, this.activeElement, this.page ); //Modified

  $.fn.dragend = function( options ) {
    var instance = this.data( "dragend" );
    //Modified
    if (typeof instace !== "undefined") {
      this.removeData("dragend");
    }
    instance = new Dragend( this, options );
    this.data( "dragend", instance );

Hope it helps to someone.

[Stereobit]

Hey, thanks for reporting. I'll have a look on this.

Feel free to do a pull request in the future if you want to change stuff like this. It's way easier to handle :-).

[Stereobit]

Hey, I'm not sure if I get you right. If you try to call dragend on the same jquery object again it will not instantiate again, just update the settings.Your changes would be removing that feature. Can you show me a example how do you end up with duplicated handlers?

[buguibu]

I'm sorry but i haven't enough time for giving you an example.

[Stereobit]

Sorry, I don't think that I can help you then without one :-/