e.stopImmediatePropagation() is not working as expected while attaching event handler to body

Question

I want to restrict further operations on a anchor button click if a specific scenario is met. My piece of code given below is not working while attaching event handler to body. Anchor is

<a class="btn btn-primary waves-effect waves-light" id="btn-ContinueToBeneficiary" role="button">Continue</a>

and the jquery part is

$('body').on('click', '#btn-ContinueToBeneficiary', function (e) {
        debugger;

        if ($(':radio[name=payeragency]:checked').length <= 0) {
            debugger;
            $('#errorPayerAgency').show();
            e.preventDefault();
            e.stopPropagation();
        }
        else {
            $('#errorPayerAgency').hide();
        }
        debugger;
        otm.ApplyOption({            
            itemList: {
                "items": [
                    {
                        //Tab bar
                        elem: "screen_3",
                        mode: "add",
                        type: "id",
                        classToAdd: "active"
                    },
                    {
                        // Tab bar
                        elem: "screen_2",
                        mode: "remove",
                        type: "id",
                        classToRemove: "active"
                    },
                    {   // Inner content div
                        elem: "beneficiary",
                        mode: "add",
                        type: "id",
                        classToAdd: "active"
                    },
                    {
                        // Inner content div
                        elem: "enter_amount",
                        mode: "remove",
                        type: "id",
                        classToRemove: "active"
                    }
                ]
            }
        });
    debugger;
        $("#screen_3 a").click();
    })

;

Ideally, jquery should stop executing further when number of radio button checked is less than or equal to zero here

if ($(':radio[name=payeragency]:checked').length <= 0) {
            debugger;
            $('#errorPayerAgency').show();
            e.preventDefault();
            e.stopPropagation();
        }

but it continues executing further. Can anyone help me in that.

Answer 1

stopPropagation() method does not stop execution of the code in the event handler. It just prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

You can just return from the function if you want to stop further execution.

if ($(':radio[name=payeragency]:checked').length <= 0) {
            debugger;
            $('#errorPayerAgency').show();
            e.preventDefault();
            return;
        }

Answer 2

Please update your if condition with below code.

if ($(':radio[name=payeragency]:checked').length <= 0) {
            debugger;
            $('#errorPayerAgency').show();
            return false;
        }