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'> <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?
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.