Event on link problem


#1

Hi everybody,

I have few links in a sidebar, and I have put an event on each links to close the sidebar when user click on the links:

Template.rightbar.events({
  'click .link': function () {
    $.sidebars.close('right');
   }
});

But when I click on this links, Meteor redirect me on the requested page, but it open a popup with the url ‘/right’ too.
For the sidebar, I use this jQuery plugin [Slidebars][1]

So I am going to watch the plugin’s source code, in the close function, two events are firered:

this.close = function(id, callback) {
        // Shift callback arguments
        if (typeof id === 'function') {
            callback = id;
            id = null;
        }
 
        // Check Slidebars has been initialized
        if (!initialized) {
            throw "Slidebars has not been initialized.";
        }
 
        // Check to see if the Slidebar exists
        if (id && !offCanvas.hasOwnProperty(id)) {
            throw "Error closing Slidebar, there is no Slidebar with id '" + id + "'.";
        }
 
        // If no id was passed, get the active Slidebar
        if (!id) {
            id = this.active('slidebar');
        }
 
        // Close a Slidebar
        if (id && offCanvas[id].active) {
            // Set active state to false
            offCanvas[id].active = false;
 
            // Trigger event
            $(events).trigger('closing', [offCanvas[id].id]);
 
            // Get animation properties
            var animationProperties = getAnimationProperties(id);
 
            // Apply css
            animationProperties.elements.css('transform', '');
 
            // Transition completetion
            setTimeout(function() {
                // Remove transition duration
                animationProperties.elements.css('transition-duration', '');
 
                // Hide the Slidebar
                offCanvas[id].element.css('display', 'none');
 
                // Trigger event
                $(events).trigger('closed', [offCanvas[id].id]);
 
                // Run callback
                if (typeof callback === 'function') {
                    callback();
                }
            }, animationProperties.duration);
        }
    };

This events are they the problem with meteor ?
Thank’s by advance.
[1]: http://plugins.adchsm.me/slidebars/


#2

If you are using anchor tags with a class of link then what you are running into is the default behavior. You’ll need to call preventDefault on the event to stop this.

Template.rightbar.events({
  'click .link': function (event) {
    event.preventDefault();

    $.sidebars.close('right');
  }
});

#3

Thank’s for your response.

I have already test with preventDefault, and same problem, it does not change anything !


#4

If you have a cloneable reproduction repo, I’m willing to take a look to see if I can make sense of it.


#5

or paste the event handler with preventDefault as you used it. I think you just forgot there something


#6

I don’t have a cloneable reproduction repo, but this is the event handler:

Template.rightbar.events({
	'click .link:not(.active)': function (event) {
		event.preventDefault();
		$.slidebars.close('right');
	}
});

The problem with preventDefault here, this is that not redirect the meteor app on the good page, my links have two functions, redirect and close the sidebar.

li.link.js-link(class="{{active 'index'}}")
	a(href="{{pathFor 'index'}}") 
		i.ion-home
		|Accueil
li.link.js-link(class="{{active 'blog'}}")
	a(href="{{pathFor 'blog'}}") 
		i.ion-ios-list-outline
		|Blog

Edit: I just realize, events are not on the anchor tag but the parent…