CODEWITHSUNDEEP
jquery
Alex
Alex

Reputation: 97

Trigger click from within click handler

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;

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

Upvotes: 0

Views: 208

Answers (4)

hierovision
hierovision

Reputation: 1

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

Upvotes: 0

Anton
Anton

Reputation: 32581

Try triggering the click using the dom element

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

DEMO

Upvotes: 1

Felix
Felix

Reputation: 38102

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

Upvotes: 0

Maksim Gladkov
Maksim Gladkov

Reputation: 3079

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

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

Upvotes: 0

Related Questions