Question

我的React项目有问题，

我有一个菜单，该菜单包含一个子菜单，该菜单包含一个子菜单这是代码

<ul
          id="main-menu-navigation"
          data-menu="menu-navigation"
          className="navigation navigation-main"
        >
          <li id="nav-analytics" className="nav-item has-sub">
            <a>
              <i className="icon-home3" />
              <span className="menu-title menu-title-main">{translation.SIDEBAR.ANALYTICS}</span>
            </a>
            <ul className="menu-content">
              {listDashboards && listDashboards.length > 0 ? (
                listDashboards.map((site, index) => (
                  <li key={index} className={privileges.isUser() ? '' : 'has-sub'}>
                    <a className="menu-item">
                      {privileges.isUser() ? '' : <i className="icon-dashboard" />}
                      {site.nom} dd
                    </a>
                    <ul className="menu-content dashboard-link">
                      {site.dashboards
                        ? site?.dashboards.map((dashboard, index) => (
                            <li key={index}>
                              <a
                                className="menu-item test-class"
                                onClick={(e) => onSelectDashboard(e, dashboard)}
                              >
                                {dashboard.nom}66
                              </a>
                            </li>
                          ))
                        : ''}
                    </ul>
                  </li>
                ))
              ) : (
                <li className="no-dashboards-sidebar">
                  <a>{translation.SIDEBAR.NO_DASHBOARDS}</a>
                </li>
              )}
            </ul>
            <ul className="menu-content" />
          </li>

          {userEnterprise && (privileges.isAdmin() || privileges.isUser()) && (
            <li className="nav-item">
              <Link to={`/protected/edit-enterprise/${userEnterprise.id}`}>
                <i className="icon-office" />
                <span data-i18n="nav.content.main" className="menu-title">
                  {translation.SIDEBAR.YOUR_ENTERPRISE}
                </span>
              </Link>
            </li>
          )}

          <li className="nav-item">
            <a>
              <i className="icon-thumbs-o-up" />
              <span data-i18n="nav.content.main" className="menu-title">
                {translation.SIDEBAR.RECOMMENDATION}
              </span>
            </a>
          </li>
          <li className="nav-item">
            <a>
              <i className="icon-bell-o" />
              <span data-i18n="nav.content.main" className="menu-title">
                {translation.SIDEBAR.NOTIFICATIONS}
              </span>
            </a>
          </li>
          <li className="nav-item">
            <a>
              <i className="icon-star-o" />
              <span data-i18n="nav.content.main" className="menu-title">
                {translation.SIDEBAR.FAVORITES}
              </span>
            </a>
          </li>
        </ul>

问题是由于模板脚本中的jquery事件侦听器，内部“ li”元素中的onClick不会触发。

此代码：

<li key={index}>
                              <a
                                className="menu-item test-class"
                                onClick={(e) => onSelectDashboard(e, dashboard)}
                              >
                                {dashboard.nom}66
                              </a>
                            </li>

包含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 = $('<a>');
                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
如果我尝试任何其他事件（例如onHover，onClickEnter等），则只有onClick事件无效。

我没有找到解决方案，希望您能帮助我，谢谢

Answer 1

我认为您的jQuery代码有问题。

$('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');
              }
    // try removing this stopPropogation
              // e.stopPropagation();
            }
          } else {
            if (!$listItem.is('.active')) {
              $listItem.siblings('.active').trigger('deactive.app.menu');
              $listItem.trigger('active.app.menu');
            }
          }
        }
    // try removing this stopPropogation
//        e.stopPropagation();
      });

内部<li> onClick不会触发

1 个答案: