BackboneJS - Why double-click to fire event?

I have a Backbone App, using HandlebarsJS for my HTML templates. Now I have a button to trigger a login popup box. My issue is, that I have to double-click the button/link until the popup opens. Why is that?? I'm using the Magnific Popup-plugin. Maybe it has to do with that?

My HTML looks like this:

<li>
   <a href="#" class="login">
      <span>Login</span>
   </a> 
</li>

And in my Backbone View I have:

events: {
    'click .login': 'login',
},

login: function(e){
    e.stopPropagation();
    $('.login').magnificPopup({
            items: {
                src: '#loginbox',
                disableOn: 700,
                type: 'inline',
                mainClass: 'mfp-fade',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
            },
            closeBtnInside: false
        });
 }

The loginbox itself, is in the same HTMl file where the login link is.

Can anyone help me out? thanks in advance...

Solution

OK I solved by myself:

$('.login').magnificPopup({
        items: {
            src: '#loginbox',
            disableOn: 700,
            type: 'inline',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        },
        closeBtnInside: false
    }).magnificPopup('open');