'Jquery on('click') not working after initializing menuzord

I have the following on click method on an Element:

$('.searchInputContainer a.dnnSearchBoxClearText').on('click', function () {
    var $this = $(this);
    var $wrap = $this.parent();
    $('.searchInputContainer input').val('').focus();
    $this.removeClass('dnnShow');
    $('.searchSkinObjectPreview', $wrap).remove();
    return false;
});

But after initializing the menuzord element, the on click method isn't working anymore.

jQuery(document).ready(function () {
        jQuery("#menuzord").menuzord({
            align: "left",
            indicatorFirstLevel: "<span class='hide-on-desktop hide-on-tablet'>&nbsp;<i class='fa bw-ico-arrow-small-down' aria-hidden='true'></i></span>",
            indicatorSecondLevel: "<i class='bw-ico-arrow-small-down hide-on-mobile' aria-hidden='true'></i><i class='bw-ico-arrow-small-down hide-on-desktop hide-on-tablet' aria-hidden='true'></i>"
        });
    });

Does anyone know what this can be due to? Or maybe Menuzord overwrites the event?

javascripthtmljquery


Solution 1:[1]

After using the selector in the JQuery "on" method, it worked:

$('.searchInputContainer').on('click', 'a.dnnSearchBoxClearText', function () {
    var $this = $(this);
    var $wrap = $this.parent();
    $('.searchInputContainer input').val('').focus();
    $this.removeClass('dnnShow');
    $('.searchSkinObjectPreview', $wrap).remove();
    return false;
});

But I don't understand the different. Would be nice if someone can explain it to me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Niels Mittelstädt

Related Questions