Open a URL in a New Window on Click With jQuery
Quick Summary
- A jQuery click handler builds a temporary link with target _blank and clicks it, opening a URL from a non-link element.
- Replace the icon-col1 class and example URL with your own; the link exists only in memory and is never added to the page.
- Popup blockers usually allow it since it runs inside a click handler, though the browser chooses between new tab and window.
Sometimes you want a click on something that isn’t a link, such as an icon or a page builder column, to open a URL in a new tab or window. This jQuery snippet does it by creating a temporary link with target="_blank" and clicking it from code.
Add it to your theme’s JavaScript file, loaded after jQuery.
(function($) {
"use strict";
jQuery(document).ready(function($) {
$('.icon-col1').on('click', function() {
$("<a>").prop({
target: "_blank",
href: "https://dev.to/"
})[0].click();
});
});
})(jQuery);How it works
$('.icon-col1').on('click', ...)runs the code when any element with the classicon-col1is clicked. Change the class to your own element’s.$("<a>")creates a new link element in memory. It is never added to the page..prop()sets itstargetto_blankand itshrefto the address to open. Replacehttps://dev.to/with your own URL.[0]gets the plain DOM element, and its nativeclick()method follows the link as if the visitor had clicked it.
Because the link is opened inside a click handler, browsers treat it as a user action, so popup blockers usually let it through. Whether it opens in a new tab or a new window is up to the browser. The outer wrapper passes jQuery in as $, which lets you use $ in WordPress, where jQuery runs in no-conflict mode. Without it you’d get the $ is not a function error.
Related articles
- closing an Elementor popup menu when a link is clicked: another click handler for page builder elements
- showing and hiding a div on button click: the same click pattern, toggling content instead
