Javascript How to activate click click action (repeat event) later?

Question

I use jQuery to bind to all links on the page (I use the 'click' event, but tried various combinations of "mousedown" and "mouseup" along with bind () and live () to no avail).

I can intercept a click without problems (with all of the above methods). What I'm trying to do is send some data using a GET request, and when it finishes, enable the default click click action.

Since I am exchanging a cross-domain, I have to use GET, not POST, and therefore cannot make a synchronous call.

Therefore, I need to return "false" from the intercepted click event, save the event for later, and then manually start it again after the connection is completed. If I return true, the link will be disconnected in the middle when the page location changes.

The problem is that I cannot find a way to fire the local click event later.

var storedEvent; $("#wrapper a").bind('click', function(event, processed) { $(event.target).unbind('click'); // temporary to make code branching easier storedEvent = event.target; event.stopPropagation(); $.ajax({ dataType: 'jsonp', data: linkData, jsonp: 'cb', url: 'xxx', cache: false, complete: function(response) { // How do I now go back and fire the native click event here? $(storedEvent).click(); } }); return false; } 

I tried using click () and trigger () where indicated, but didn't work.

I know that the presentation succeeds and the code forks correctly - I debugged this far. I just can't play the event.

Please note that I cannot do something simple, for example, save href and set window.location later - some of the links have their own onClicks, and others with the specified varius parameters. I would like to simply reproduce the event that I stopped earlier.

I started using event delegation with live () and had everything there was except this - I simplified it to bind () to simplify the problem.

Answer 1

You cannot trigger the click event on the anchor and force it to follow the cross browser href.

Answer 2

Updated answer: yes you can (if you no longer support IE8).

Use dispatchEvent () to trigger a copy of the original event.

First, you need a utility function to clone events (since browsers only allow events to be sent once, for security reasons):

 var cloneNativeMouseEvent = function (original) { var copy; try { copy = new MouseEvent(original.type, original); } catch (stupidInternetExplorer) { copy = document.createEvent('MouseEvent'); copy.initMouseEvent(original.type, original.bubbles, original.cancelable, original.view, original.detail, original.screenX, original.screenY, original.clientX, original.clientY, original.ctrlKey, original.altKey, original.shiftKey, original.metaKey, original.button, original.relatedTarget) } return copy; }; 

In your click handler, save the jQuery event reference for later playback:

 $("#wrapper a").bind('click', function (event) { event.preventDefault(); storedEvent = event; ... } 

And finally, in the callback where you want to call the click again, do it like this:

 var originalEventClone = cloneNativeMouseEvent(storedEvent.originalEvent); storedEvent.target.dispatchEvent(originalEventClone); 

Please note that in general, events created or modified by JavaScript are marked as "untrusted" by user agents, so they cannot trigger default actions. Fortunately, click events are the only exception. (one)

Answer 3

It turns out that redsquare is basically correct - it does not work without tearing your hair out.

IE is a problem. dispatchEvent () works fine in FireFox. In IE, you can choose fireEvent to trigger any related events (but not click) or click () (for clicks, but not for events), but you cannot do both correctly.

I got “almost working” by temporarily changing the links and link targets so that they load a blank page in an iframe. I then listened for the "load" iframe events to determine if the default action for the link was performed. In IE, I could run "click" if necessary, or "fireEvent" otherwise after changing the href and target back.

However, this was too much hacking - what if one of the links has a related event based on the href attribute? (the thick box seemed to continue to work, but I expect it to be a competition).

In the end, I still didn't need to do this ( JavaScript / jQuery: How do I ensure that the click-tracking event in the cross-domain domain is successful before the user leaves the page? ), So I’m relieved. Turns out I had to use POST in this case.