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
– Arun P Johny, Commented Feb 13, 2014 at 13:23
Check type of lnk.data("checked"), it could be considered not falsy — u_mulder
– u_mulder, Commented Feb 13, 2014 at 13:23
@u_mulder that's why I check != true which covers null, "", undefined, false or anything except true really :) — Alex
– Alex, Commented Feb 13, 2014 at 13:27

Anton · Accepted Answer · 2014-02-13 13:30:10Z

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, 2014 at 13:30

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

This works. Do you know why? Presumably jquery is interfering, does it have some sort of 'potential infinite loop' check?

Anton Over a year ago

@Alex I'm not exactly sure why jQuery is not allowing the default behavior of a link, but i think it's intended.

Anton Over a year ago

@Alex found some info here stackoverflow.com/a/5867423/1696560 You can only trigger a click that jQuery has created. It's one of jQuery's cute little quirks.

Maksim Gladkov · Accepted Answer · 2014-02-13 13:22:54Z

0

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

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

answered Feb 13, 2014 at 13:22

Maksim Gladkov

3,0791 gold badge17 silver badges16 bronze badges

Comments

Felix · Accepted Answer · 2014-02-13 13:28:48Z

0

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');   
    });
});

answered Feb 13, 2014 at 13:28

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:45:43Z

0

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

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 8, 2016 at 22:02

hierovision

1

Collectives™ on Stack Overflow

Trigger click from within click handler

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related