对元素文本的更改会破坏它的父委托事件处理程序

Question

作为学校项目的一部分，我正在开发一个下拉菜单。我已经让大多数东西都能正常工作，但是我遇到了一个 JQuery 事件问题，我找不到答案，每当我点击我的列表项时，它都会正确设置列表名称，但之后没有任何事件起作用.我将处理程序放在父元素上，看看是否有帮助，但仍然没有。

这里快速浏览一下 JQuery。

$(document).ready(function(){

$('nav ul').on('mouseenter', '.menu1', function(){
  $('.menu1 ul').removeClass("hidden");
});

$('nav ul').on('mouseleave', '.menu1', function(){
  setTimeout(function(){
    $('.menu1 ul').addClass("hidden");
  }, 300);
});

$('nav ul').on('click', '.menu1 ul li', function(){
  $('.menu1').text($(this).text());
});


});

我也有一个用于列表的代码笔。

https://codepen.io/JFarenci/pen/gvoQvq

Answer 1

问题出在$('.menu1').text($(this).text());

在选择选项时执行此行后，li 标记内的部分更改为：<li class="menu1">one</li>（假设您选择了“一个”）。 ul 标记以及下拉菜单被覆盖。

要解决此问题，请在li 标记上方留出一个单独的空间来显示所选选项。

HTML：

    <p id="selected"></p>

JAVASCRIPT：

    $('nav ul').on('click', '.menu1 ul li',function({
       $('#selected').text($(this).text());   
    });

希望这会有所帮助！

Answer 2

1. 我删除了您的 mouseenter 和 mouseleave 事件并将其替换为 mouseover。
2. 在每个click 上，我添加了一个包含$(this).text() 的span。请注意，它前面有一个remove()，用于在设置文本时处理先前的点击。

查看可运行的 sn-p 进行测试。

$(document).ready(function() {

  $('nav ul').on('mouseover', '.menu1', function() {
    setTimeout(function() {
      $('.menu1 ul').show();
    }, 300);
  });

  $('nav ul').on('click', '.menu1 ul li', function() {
    $('.menu1').find("#click").remove();
    $('.menu1').append('<span id="click">' + $(this).text() + '<span>');
  });


});

nav {
  padding: 50px;
  text-align: center;
}

nav>ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  background: #ddd;
  border-radius: 5px;
}

nav>ul>li {
  float: left;
  width: 150px;
  height: 65px;
  line-height: 65px;
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

nav>ul>li:hover {
  background: #d5d5d5;
  border-radius: 5px;
}

ul.dropMenu {
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  padding: 0;
}

ul.dropMenu li {
  background: #666;
  color: rgba(255, 255, 255, 0.7);
}

ul.dropMenu li:hover {
  background: #606060;
}

ul.dropMenu li:last-child {
  border-radius: 0px 0px 5px 5px;
}

.hidden {
  display: none;
  /*opacity: 0;*/
}

li:hover>ul.dropMenu {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

li:hover>ul.dropMenu li {
  opacity: 0;
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

li:hover>ul.dropMenu li:nth-child(1) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(2) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 60ms;
  animation-delay: 60ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(3) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 120ms;
  animation-delay: 120ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li:hover>ul.dropMenu li:nth-child(4) {
  -webkit-animation-name: fold-out;
  animation-name: fold-out;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 180ms;
  animation-delay: 180ms;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fold-out {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
  60% {
    -webkit-transform: rotateX(15deg);
    transform: rotateX(15deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

@keyframes fold-out {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
  60% {
    -webkit-transform: rotateX(15deg);
    transform: rotateX(15deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

li>ul.dropMenu {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

li>ul.dropMenu li {
  -webkit-transform-origin: top center;
  transform-origin: top center;
}

li>ul.dropMenu li:nth-child(4) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(3) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 60ms;
  animation-delay: 60ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(2) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 120ms;
  animation-delay: 120ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

li>ul.dropMenu li:nth-child(1) {
  -webkit-animation-name: fold-in;
  animation-name: fold-in;
  -webkit-animation-duration: 120ms;
  animation-duration: 120ms;
  -webkit-animation-delay: 180ms;
  animation-delay: 180ms;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fold-in {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
}

@keyframes fold-in {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: rotateX(-90deg) translateY(10px);
    transform: rotateX(-90deg) translateY(10px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li class="menu1">
      <ul class="dropMenu hidden">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>fork</li>
      </ul>
    </li>
  </ul>

</nav>