Question

我在这里填写完整的代码，以便没有遗漏任何可能导致此问题发生的事情。

在运行代码后执行复制问题的步骤。

点击+，它会创建一个新的无序列表ul，其中包含li。
在li内点击并输入内容，然后按Enter。它会在它之后创建一个新的li。因此，每个keypress上绑定了一个li事件，在其后面插入一个新的li。
现在在第二个li中输入内容，然后按Tab键。它会将此li置于之前的li内。标签新闻事件也受到约束。
现在再次点击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事件无法处理正确的元素

1 个答案: