Be aware if you want to execute AJAX requests inside the event handler function for the click event. For some reason Chrome (and maybe other browsers) will not open a new tab/window.
I just found an interesting solution to this issue. I was creating spans which contain information based on the return from a web service. I thought about trying to put a link around the span so that if I clicked on it, the "a" would capture the click.
But I was trying to capture the click with the span... so I thought why not do this when I created the span.
var span = $('<span id="something" data-href="'+url+'" />');
I then bound a click handler to the span which created a link based on the 'data-href' attribute:
span.click(function(e) {
e.stopPropagation();
var href = $(this).attr('data-href');
var link = $('<a href="http://' + href + '" />');
link.attr('target', '_blank');
window.open(link.attr('href'));
});
This successfully allowed me to click on a span and open a new window with a proper url.
this solution also considered the case that url is empty and disabled(gray) the empty link.
$(function() {
changeAnchor();
});
function changeAnchor() {
$("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
$(this).css("background", "none");
$(this).css("font-weight", "normal");
var url = $(this).attr('href').trim();
if (url == " " || url == "") { //disable empty link
$(this).attr("class", "disabled");
$(this).attr("href", "javascript:void(0)");
} else {
$(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
}
});
}