Внутренний onClick не срабатывает ⇐ Jquery

[Anonymous]

У меня проблема в моем проекте React.
У меня есть меню, в котором есть подменю, в котором есть подменю
Это разметка и код:

Код: Выделить всё

[list]          id="main-menu-navigation"
data-menu="menu-navigation"
className="navigation navigation-main"
>
[*]


{translation.SIDEBAR.ANALYTICS}


{listDashboards && listDashboards.length > 0 ? (
listDashboards.map((site, index) => (


{privileges.isUser() ? '' : }
{site.nom} dd


{site.dashboards
? site?.dashboards.map((dashboard, index) => (

 onSelectDashboard(e, dashboard)}
>
{dashboard.nom}66


))
: ''}
[/list]

))
) : (
[*]
{translation.SIDEBAR.NO_DASHBOARDS}

)}

[list]


{userEnterprise && (privileges.isAdmin() || privileges.isUser()) && (
[*]



{translation.SIDEBAR.YOUR_ENTERPRISE}



)}

[*]



{translation.SIDEBAR.RECOMMENDATION}



[*]



{translation.SIDEBAR.NOTIFICATIONS}



[*]



{translation.SIDEBAR.FAVORITES}



[/list]

Проблема в том, что onClick во внутреннем элементе «li» не срабатывает из-за прослушивателей событий jquery в сценариях шаблонов.
этот код:

Код: Выделить всё

[*]
  onSelectDashboard(e, dashboard)}
>
{dashboard.nom}66

файл меню приложения, содержащий код jquery

Код: Выделить всё

    bind_events: function () {
var menuObj = this;

$('.navigation-main')
.on('mouseenter.app.menu', 'li', function () {
var $this = $(this);
$('.hover', '.navigation-main').removeClass('hover');
if (
$body.hasClass('menu-collapsed') ||
($body.data('menu') == 'vertical-compact-menu' &&
!$body.hasClass('vertical-overlay-menu'))
) {
$('.main-menu-content').children('span.menu-title').remove();
$('.main-menu-content').children('a.menu-title').remove();
$('.main-menu-content').children('ul.menu-content').remove();

// Title
var menuTitle = $this.find('span.menu-title-main').clone(),
tempTitle,
tempLink;
if (!$this.hasClass('has-sub')) {
tempTitle = $this.find('span.menu-title').text();
tempLink = $this.children('a').attr('href');
if (tempTitle !== '') {
menuTitle = $('');
menuTitle.attr('href', tempLink);
menuTitle.attr('title', tempTitle);
menuTitle.text(tempTitle);
menuTitle.addClass('menu-title');
}
}
// menu_header_height = ($('.main-menu-header').length) ? $('.main-menu-header').height() : 0,
// fromTop = menu_header_height + $this.position().top + parseInt($this.css( "border-top" ),10);
var fromTop;
if ($this.css('border-top')) {
fromTop = $this.position().top + parseInt($this.css('border-top'), 10);
} else {
fromTop = $this.position().top;
}
if ($body.data('menu') !== 'vertical-compact-menu') {
menuTitle.appendTo('.main-menu-content').css({
position: 'fixed',
top: fromTop,
});
}

// Content
if ($this.hasClass('has-sub') &&  $this.hasClass('nav-item')) {
var menuContent = $this.children('ul:first');
menuObj.adjustSubmenu($this);
}
}
$this.addClass('hover');
})
.on('mouseleave.app.menu', 'li', function () {
// $(this).removeClass('hover');
})
.on('active.app.menu', 'li', function (e) {
$(this).addClass('active');
e.stopPropagation();
})
.on('deactive.app.menu', 'li.active', function (e) {
$(this).removeClass('active');
e.stopPropagation();
})
.on('open.app.menu', 'li', function (e) {
var $listItem = $(this);
$listItem.addClass('open');

menuObj.expand($listItem);

// If menu collapsible then do not take any action
if ($('.main-menu').hasClass('menu-collapsible')) {
return false;
}
// If menu accordion then close all except clicked once
else {
$listItem.siblings('.open').find('li.open').trigger('close.app.menu');
$listItem.siblings('.open').trigger('close.app.menu');
}

e.stopPropagation();
})
.on('close.app.menu', 'li.open', function (e) {
var $listItem = $(this);

$listItem.removeClass('open');
menuObj.collapse($listItem);

e.stopPropagation();
})
.on('click.app.menu', 'li', function (e) {
var $listItem = $(this);
if ($listItem.is('.disabled')) {
e.preventDefault();
} else {
if (
$body.hasClass('menu-collapsed') ||
($body.data('menu') == 'vertical-compact-menu' &&
$listItem.is('.has-sub') &&
!$body.hasClass('vertical-overlay-menu'))
) {
e.preventDefault();
} else {
if ($listItem.has('ul')) {
if ($listItem.is('.open')) {
$listItem.trigger('close.app.menu');
} else {
$listItem.trigger('open.app.menu');
}
} else {
if (!$listItem.is('.active')) {
$listItem.siblings('.active').trigger('deactive.app.menu');
$listItem.trigger('active.app.menu');
}
}
}
}

e.stopPropagation();
});

$('.main-menu-content').on('mouseleave', function () {
if ($body.hasClass('menu-collapsed') || $body.data('menu') == 'vertical-compact-menu') {
$('.main-menu-content').children('span.menu-title').remove();
$('.main-menu-content').children('a.menu-title').remove();
$('.main-menu-content').children('ul.menu-content').remove();
}
$('.hover', '.navigation-main').removeClass('hover');
});

// If list item has sub menu items then prevent redirection.
$('.navigation-main li.has-sub >  a').on('click', function (e) {
e.preventDefault();
});

$('ul.menu-content').on('click', 'li', function (e) {
var $listItem = $(this);
if ($listItem.is('.disabled')) {
e.preventDefault();
} else {
if ($listItem.has('ul')) {
if ($listItem.is('.open')) {
$listItem.removeClass('open');
menuObj.collapse($listItem);
} else {
$listItem.addClass('open');

menuObj.expand($listItem);

// If menu collapsible then do not take any action
if ($('.main-menu').hasClass('menu-collapsible')) {
return false;
}
// If menu accordion then close all except clicked once
else {
$listItem.siblings('.open').find('li.open').trigger('close.app.menu');
$listItem.siblings('.open').trigger('close.app.menu');
}

e.stopPropagation();
}
} else {
if (!$listItem.is('.active')) {
$listItem.siblings('.active').trigger('deactive.app.menu');
$listItem.trigger('active.app.menu');
}
}
}

e.stopPropagation();
});
}

Примечания:

• Если я прокомментирую код jQuery, он работает, но мне нужен jQuery для многих других функций.
• Только событие onClick не работает, если я попробую любое другое событие, например onHover, onClickEnter и т. д. Оно работает нормально.

Я не нашел решение, я надеюсь, что вы сможете мне помочь, и спасибо

Подробнее здесь: https://stackoverflow.com/questions/646 ... oesnt-fire