links on elementor modal not working on click

14 views Asked by At

I have created a hamburger menu using Elementor's popup feature and dynamic feature to connect the popup with the hamburger so that it triggers the menu whenever I click on the hamburger button. However, for some reason, I can't handle clicks on the links inside it. I suppose something is blocking it, as I don't have any errors. My jQuery works well, and if I target another element on my page, like 'entry-title' for example, the click works. So I ask for your help if you know what to do, please. Here is my code:

Navigation.js

    jQuery(document).ready(function($) {
console.log('Here it works');
// Navigation menu
jQuery('.onepage h4.elementor-heading-title.elementor-size-default > a').click(function(event) {
    console.log("here doesn't work");        
    event.preventDefault();
    var hash = this.hash;

    if (window.location.pathname === '/') {
        jQuery('html, body').animate({
            scrollTop: jQuery(hash).offset().top
        }, 800, function() {
            window.location.hash = hash;
        });
    } else {
        var targetUrl = window.location.origin + '/#' + this.hash.substr(1);
        window.location.href = targetUrl;
        return;
    }
    jQuery('.elementor-popup-modal').css('display', 'none');
});

});

1

There are 1 answers

0
alex eusebio On

I finally solved the problem with this code

   <script>
   jQuery(function($) {
    // Attache un gestionnaire d'événements de clic à tous les liens à l'intérieur de ".elementor-location-popup"
    $(document).on('click', '.elementor-location-popup a', function(event) {
        // Ferme la popup
        elementorProFrontend.modules.popup.closePopup({}, event);
        
        // Vérifie si le lien a la classe ".onepage"
        if ($(this).is('.onepage')) {
            console.log('test');
            // Empêche le comportement par défaut du lien
            event.preventDefault();
            
            // Obtient le hash du lien
            var hash = this.hash;

            // Vérifie le chemin de l'URL actuelle
            if (window.location.pathname === '/') {
                // Anime le défilement vers la position du hash
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function() {
                    // Met à jour l'URL avec le hash
                    window.location.hash = hash;
                });
            } else {
                // Construit l'URL cible avec le hash
                var targetUrl = window.location.origin + '/#' + hash.substr(1);
                // Redirige vers l'URL cible
                window.location.href = targetUrl;
                return;
            }
        }
    });
});


</script>

I also solved it by creating tags directly with the insertion of a custom HTML tag, which allowed me to add the .onepage class directly to my tags and give them the desired behavior.