Magento 2 custom popup not work when click of 'Proceed to Checkout'

Question

I have created the custom Popup and open the popup when click on process to checkout in minicart.

login popup not work when click on 'Proceed to Checkout' after the login customer account.It's work after the page refresh or go to another page.

Created app/code/{VendorName}/{ModuleName}/view/frontend/requirejs-config.js and added below code:

var config = {
    'config': {
        'mixins': {
            'Magento_Checkout/js/view/minicart': {
                '{VendorName}_{ModuleName}/js/checkout/view/minicart': true
            }
        }
    }
};

Create Mixin Js app/code/{VendorName}/{ModuleName}/view/frontend/web/js/checkout/view/minicart.js

And below code:

define([
    'jquery',
    'Magento_Customer/js/model/authentication-popup',
    'Magento_Ui/js/modal/modal',
    'Magento_Customer/js/customer-data'
], function ($, authenticationPopup, modal, customerData
) {
    'use strict';

    return function (Component) {
        return Component.extend({

            /**
             * @override
             */
            getCartParam: function (name) {
                var self = this;

                if(name === 'possible_onepage_checkout'){
                    $('#top-cart-btn-checkout').click(function (event) {
                        var customer = customerData.get('customer');
                        if (customer().firstname) {
                            var options = {
                                type: 'popup',
                                responsive: true,
                                innerScroll: true,
                                buttons: false,
                                modalClass: 'hold-modal'
                            };
                            event.preventDefault();
                            var popup = modal(options, $('#popup-modal'));
                            $("#popup-modal").modal("openModal");
                            return false;
                        }
                    });

                }
                return this._super(name);
            },
        });
    }
});

I have debugged And I know that the click event not working at first time it's working after the refresh page.

Let me know where I wrong?

Answer 1

Change below code

$('#top-cart-btn-checkout').click(function (event) {

to

var minicart = $('[data-block="minicart"]');
minicart.on('click', '#top-cart-btn-checkout', function (event) {

Answer 2

Change your below code

$('#top-cart-btn-checkout').click(function (event) {

to

$('html').on("click","#top-cart-btn-checkout", function(event){