1

On my site, I have a div container, which contains a <input>, and a <a onclick="DoSomeStuff();" href="#" target="_blank"> element, which acts as a button. Now, DoSomeStuff(); modifies the href attribute based on the value of the input element.

I need to emulate click on this anchor tag after user pressed enter on an input element. I know how to detect this enter, but I don't know how to click this anchor. jQuery's .click() is not working in here, it only fires onclick() of the anchor tag, but does not actually click the anchor.

Edit: Here is an example on what I want to do: http://jsfiddle.net/JZYWZ/. It triggers the onclick event of the anchor tag, but does not follow the link in new tab.

ojek
  • 9,680
  • 21
  • 71
  • 110
  • do you want to see it getting click with visual effects? – Moazzam Khan Sep 04 '13 at 14:49
  • jQuery Trigger sounds like what you need. http://api.jquery.com/trigger/ – Scott Sep 04 '13 at 14:49
  • 1
    Why not just trigger `DoSomeStuff()` when pressing on enter, rather then triggering the `a` tag? – putvande Sep 04 '13 at 14:50
  • @putvande: `DoSomeStuff()` changes the `href` attribute. But I need to click this anchor in order to open link in new tab. If I try to `window.open` inside my `DoSomeStuff()`, then firefox will block this new window as a popup. – ojek Sep 04 '13 at 14:52

2 Answers2

3

Browsers are very strict about opening links in new tabs/windows through javascript.

If they allowed you to have javascript click and open a new tab when the user presses enter (for what you know to be legitimate reasons), that feature could be abused by spammers to have javascript click ads and spam links when the user does anything. Sadly there's no way the browser can tell your linked page is legitimate and not spam or monetised clickbait.

Pretty much the only option to open the url in new tab using javascript is window.open which you've already tried: the browser will always look to the user's settings on popup blocking and on whether to open in tabs or windows - and the default settings are strict, particularly in Firefox and Internet Explorer (less so in Chrome and Safari).

A possible alternate approach where you won't be fighting the browser's anti-spam defences is to open the content in a modal overlay (iframe-based if you need multiple pages). Here's one example library.

It'll be similar from a UI point of view - giving the user related content in a form where they can just close it and return to the main page when they're done with it.

Modal overlays are widely used and likely to be familiar with users. For example, they're now pretty standard for sharing pages, logins and other pieces of simple interaction or side content. Example:

enter image description here

Community
  • 1
  • 1
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
1

EDIT

After some additional testing.... 

$('input[type="text"]').on('keyup', function(event){
    if(event.keyCode === 13){
        DoSomeStuff();
        window.open($('a').attr('href'));      
    }
});
Robert
  • 386
  • 1
  • 8
  • As I said in my original post, jQuery's `.click()` does not do the work in here, it does not actually click the anchor, it only fires it's `onclick` event. – ojek Sep 04 '13 at 14:57
  • unless your DoSomeStuff is calling event.preventDefault(), or event.stopPropagation(); then the full event should be triggered. – Robert Sep 04 '13 at 15:03
  • `http://jsfiddle.net/JZYWZ/` as you can see, it triggers `onclick` event, but does not actually follow the link. – ojek Sep 04 '13 at 15:16
  • 1
    i have made some adjustments... i see what you are saying is happening Here is an update fiddle http://jsfiddle.net/JZYWZ/1/ – Robert Sep 04 '13 at 15:31
  • Yeah, that works. But the problem is with firefox. It blocks `window.open` as a popup, so it won't do the trick. – ojek Sep 04 '13 at 15:40
  • Updated fiddle works in Chrome but hits popup blocker in Firefox (on default settings). How `window.open` is treated is dependent on the browser's settings - which only the users and browser developers can control, for reasons explained below. – user56reinstatemonica8 Sep 04 '13 at 15:43