Trigger click from within click handler

Question

I'm trying to trigger a click event on a link from within a click handler for the same link. I want to stop the link from navigating until the user has been notified of some action. Once the action is complete the link should navigate as normal.

Please see the test case below.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script language="javascript" type="text/javascript">
            $(function () {
                $("#test").click(function (e) {
                    var lnk = $(this);

                    if (lnk.data("checked") != true) {

                        var notice = $('<a href="#">Continue</a>');
                        $('body').append(notice);

                        notice.click(function (e) {
                            lnk.data("checked", true);
                            lnk.click();

                            return false;
                        });

                        return false;
                    }

                    alert("should navigate now");
                });
            });
        </script>

        <a id="test" href="http://www.google.com">Test</a>

    </body>
</html>

The expected behavior for this example is;

Test clicked
Continue appears
Continue clicked
Page navigates to the href of 'Test'

Instead, when continue is clicked, the alert 'should navigate now' is shown but the browser doesn't perform any action.

manual triggering of a click event may not trigger the default behavior of the element — Arun P Johny, Feb 13 '14 at 13:23
Check type of `lnk.data("checked")`, it could be considered not `falsy` — u_mulder, Feb 13 '14 at 13:23
@u_mulder that's why I check `!= true` which covers `null`, "", `undefined`, `false` or anything except `true` really :) — Alex, Feb 13 '14 at 13:27

score 1 · Accepted Answer · answered Feb 13 '14 at 13:30

1

Try triggering the click using the dom element

   notice.click(function (e) {
       lnk.data("checked", true);
       lnk[0].click();
       // ^^^^
       return false;
   });

DEMO

answered Feb 13 '14 at 13:30

Anton

32,245
5
44
54

This works. Do you know why? Presumably jquery is interfering, does it have some sort of 'potential infinite loop' check? – Alex Feb 13 '14 at 13:35
@Alex I'm not exactly sure why jQuery is not allowing the default behavior of a link, but i think it's intended. – Anton Feb 13 '14 at 13:36
@Alex found some info here http://stackoverflow.com/a/5867423/1696560 `You can only trigger a click that jQuery has created. It's one of jQuery's cute little quirks.` – Anton Feb 13 '14 at 13:38

score 0 · Answer 2 · answered Feb 13 '14 at 13:22

0

Just add document.location.href = lnk.attr('href'); after alert.

I think, the problem appears, because alert breaks callback.

answered Feb 13 '14 at 13:22

Maksim Gladkov

3,051
1
14
16

score 0 · Answer 3 · answered Feb 13 '14 at 13:28

Not sure this is what you want but try to rewrite your code like this:

$(function () {
    $("#test").click(function (e) {
        e.preventDefault();
        if ($(this).data("checked") != true) {
            var notice = $('<a class="link" href="#">Continue</a>');
            $('body').append(notice);
        }
        alert("should navigate now");
    });

    $(document).on('click', '.link', function (e) {
        $("#test").data("checked", true);
        window.location = $("#test").attr('href');   
    });
});

score 0 · Answer 4 · edited May 23 '17 at 11:45

I know this is old, but I want to contribute to those that find this question and answers from now on.

If you're trying to confirm whether a user wants to leave a site, then consider the window.onbeforeunload event handler. You are able to put in a string message that is presented to the user in an alert-like message box.

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};
</script>

Check the first answer here: Confirmation before closing of tab/browser

Trigger click from within click handler

4 Answers4