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

Question

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

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

单击 +，它将创建一个新的无序列表 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>

Answer 1

我能弄清楚这个问题，它与 jquery 无关。

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

我通过将父级的属性设置为 false 来确认这一点并且有效。

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

jQuery event not working on correct element

jquery

events

keypress