Trying to move javascript that opens link in new window to a reusable class

Question

Ive created links that open in a new window (not tab) with inline javascript:

onclick="window.open(this.href, 'newwindow', 'width=370, height=280'); return false;"

Now I want to move this javascript to a reusable class. Why is the following not working?

  $(document).ready(function() {

    $('.open-new-window').click(function(){
      return false;
      window.open(this.href, 'newwindow', 'width=500, height=150'); 
    });


  });

Answer 1

function is return before window.open() function so return false; should be at bottom

 $(document).ready(function() {

    $('.open-new-window').click(function(){

      window.open(this.href, 'newwindow', 'width=500, height=150'); 
     return false;
    });


  });

Answer 2

Your function returns before executing window's open method.

Answer 3

When you copy the code from the inline on click handler the order is really important. a return stops the function and returns a piece of information. Once returned nothing after it runs. The correct code is:

$(document).ready(function() {
   $('.open-new-window').click(function(){
     window.open(this.href, 'newwindow', 'width=500, height=150'); 
     return false;
   });
});

If you wanted to prevent the click first you could do this instead:

$(document).ready(function() {
   $('.open-new-window').click(function(e){
     e.preventDefault();
     window.open(this.href, 'newwindow', 'width=500, height=150');
   });
});

The first method may get a deprecated error (event.returnValue is deprecated. Please use the standard event.preventDefault() instead)