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

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());   
    });

希望这对您有所帮助!