0
我在這裏把完整的代碼，以便沒有遺漏可能導致此問題發生。jQuery事件不正確的元素
以下步驟在運行代碼後複製問題。
- 點擊+，它會創建一個新的無序列表
ul與li。 - 點擊
li並鍵入內容並按Enter。之後它會創建一個新的li。因此，每個li上都會有一個keypress事件，它在Enter上插入一個新的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
{
\t min-height: 800px;
\t 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分隔兩個事件功能。 – Roljhon
這個過程是嵌套的。所以我不能使用ID和單獨的類名。 –