jQuery事件不适用于正确的元素答案

【问题标题】：jQuery event not working on correct elementjQuery事件不适用于正确的元素
【发布时间】：2017-05-16 16:59:03
【问题描述】：

我将完整的代码放在这里，以免遗漏任何可能导致此问题发生的内容。

在运行代码后按照步骤复制问题。

点击+，它将创建一个新的无序列表ul 和li。
在li 内部单击并输入内容，然后按Enter。它将在它之后创建一个新的li。因此，每个 li 上都有一个 keypress 事件绑定，在 Enter 后会插入一个新的 li。
现在在第二个li 中输入一些内容，然后按 Tab。它将把这个li 放在之前的li 中。还绑定了一个 Tab 按下事件。
现在再次单击相同的li 并按Enter。这就是问题所在。

预计新的li 将在此之后插入，但实际上它是在父li 之后插入的。

调试后显示 $(this) 指向父 li，内部代码为 keypress 事件处理。

请告诉我为什么会这样。

   $('document').ready(function() {
      $('#plus').click(function() {
        $('#notes').append(fillnote());
      });
    });

    function fillnote() {
      var $ul = $('<ul>').addClass('myUL').append(getLi());
      var node = $('<div>').append($ul);
      return node;
    }

    function getLi()
    {
      return $('<li>').addClass('edit-list')
      .attr('contentEditable', true);
    }
    
    $(document).on('keydown', '.edit-list', function(e) {
      var keyCode = e.keyCode || e.which; 

      //Enter key
      if (keyCode == 13) {
        var $newLi = getLi();
        $(this).after($newLi);
        $newLi.focus();
        return false;
      }
      //Tab Key
      if (keyCode == 9) {
          console.log(this);
          moveInsidePrevSibling($(this));
          return false;
      }
    });

    function moveInsidePrevSibling($obj)
    {
      var $prev = $obj.prev();
      var $ul = $('<ul>').addClass('myUL');
        $prev.append($ul);
      $ul.append($obj);
    }

#notes
{
	min-height: 800px;
	width:800px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul li {
    cursor: pointer;
    position: relative;
    padding: 5px 8px 5px 20px;
    background: #eee;
    font-size: 14px;
    transition: 0.2s;
    line-height: 1.5em;
    height: auto;

}

ul li:nth-child(odd) {
    background: #f9f9f9;
}

ul li:hover {
    background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <span id="plus">+</span>
    <div id="notes"></div>
</body>

【问题讨论】：

我认为这将非常困难，因为事件委托是如何工作的，因为您的子元素在您的父元素中，它也有一个keydown 的事件侦听器，$(this) 将永远是父元素我认为。我建议将这两个事件功能与唯一的引用类或 ID 分开。
这个过程是嵌套的。所以我不能使用 ids 和单独的类名。

标签： jquery events keypress

【解决方案1】：

我能够找出问题所在，它与 jquery 无关。

原来罪魁祸首是contentEditable 属性。我为所有li's 将此属性设置为true。有一个错误，即当子级和父级都具有此属性为true 时，任何keypress 事件都适用于父级而不是子级。

我通过将父级的属性设置为false 来确认这一点，它起作用了。

【讨论】：