Bullet-proof Jquery implementation: Capturing click interactions without fail

Hi, I'm new to this forum and JS coding in general (learner stage!).

I am using Jquery to fire events when users interact with different elements (primarily click interactions). My concern (due to ignorance probably) is that Jquery can't/wont always work to capture the interaction so my goal is to make minimise that potential failure rate (and learn about when such occurances may happen).

I've already identified a few complications:

- element being clicked on has/doesn't have target _blank attribute so delay is necessary
- people open link in new tab by using Ctrl+Click, right click then "Open in new tab", clicking middle buttons for mouses with custom configuration
- element is an email address (I've had the code below end up opening the link twice)

Assuming there are NO JS errors in the code, are there any other situations where the Jquery might not capture the click event? Any browser/device specific situations?

See my code below for my efforts so far

// Clicked Social Profile
  $('.socialprofile').click(function(){
 
    if ($(this).attr('target').toLowerCase() == '_blank' || e.metaKey || e.ctrlKey || e.which == 2 || e.which == 3) {
      var newtab = true;
    }
 
    if (!newtab) {
      e.preventDefault();
      setTimeout('location.href = "' + this.href  + '"', 150);
    }
 
  });

Code (markup):

Many thanks for your help!

 

One situation I can think of where jQuery might not properly bind a click event is if you're dynamically generating elements. In such a case you should make sure that your jQuery code is only executed after the DOM is ready, for example:

$(document).ready(function() {
//code goes here
});

Code (markup):

You can also use .on in lieu of the click handler, and it should then bind that event even to elements dynamically inserted into the DOM after the fact, example:

$(document).on('click', '.socialprofile', function(e) {
//code
});

Code (markup):

A browser bug I'm aware of was in some early versions of IE when you attempt to bind events to hidden elements(it doesn't work.) I don't know if it it's been worked around in recent versions of jQuery as I no longer test with older versions of IE, but it's something to keep in mind I guess. Another bug occurs if you try to bind events to elements with negative z-levels. Really these are edge cases though.