How can I return a href link to it's default behavior after using e.preventDefault();?

Question

I updated my code and rephrased my question:

I am trying to create the following condition. When a link with an empty href attribute (for example href="") is clicked, a modal is launched and the default behavior of that link is prevented..

But when the href attribute contains a value (href="www.something.com") I would like for the link to work as it normally does using its default behavior.

For some reason my code isn't working. Any help is appreciated.

      // Semicolon (;) to ensure closing of earlier scripting
      // Encapsulation
      // $ is assigned to jQuery
      ;(function($) {
           // DOM Ready
          $(function() {

              // Binding a click event
              // From jQuery v.1.7.0 use .on() instead of .bind()
              $('.launch').bind('click', function(e) {
                var attrId = $(this).attr('attrId');

                if( $('.launch').attr('href') == '') {

                    // Prevents the default action to be triggered. 
                    e.preventDefault();

                    // Triggering bPopup when click event is fired
                    $('div[attrId="' + attrId+'"]').bPopup({
                      //position: ['auto', 'auto'], //x, y
                      appendTo: 'body'
                    });
                }  else {
                  $(this).removeAttribute('attrId');
                  return true;
                }  

              });

          });

      })(jQuery);

score 2 · Answer 1 · answered Sep 10 '15 at 18:11

2

Your jQuery is... very wrong. $('href').attr('') is getting the empty attribute from an element <href>... Did you mean:

if( $(this).attr('href') == '')

answered Sep 10 '15 at 18:11

Niet the Dark Absol

320,036
81
464
592

Yes, that's what I meant. Thanks – Spanky Sep 10 '15 at 19:45
I rephrased my question and code so I still need help on why it's not working – Spanky Sep 11 '15 at 01:16

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

A few things: event is undefined, as your event object is simply called e. Secondly, e.stopPropagation(); will not do what you want. stopPropagation simply prevents parent events from firing (eg: clicking a <td> will also fire click on the containing <tr> unless stopped).

Try just replacing your else statement with

return true;

Also your jQuery is incorrect (as stated in the other answer here).

This answer may help as well:

How to trigger an event after using event.preventDefault()

Good luck!

edited May 23 '17 at 12:08

Community

1
1

answered Sep 10 '15 at 18:12

CollinD

7,304
2
22
45

Thanks for your detailed explanation. I see that I used event instead of e. Thanks for that – Spanky Sep 10 '15 at 19:46

How can I return a href link to it's default behavior after using e.preventDefault();?

2 Answers2