0
この問題が発生する可能性のあるものがないように、私はここに完全なコードを入れています。jQueryイベントが正しい要素で機能していない
コード実行後に問題を再現する手順は次のとおりです。 +上の
- クリックして、それが
liで新しい順不同リストulを作成します。 liをクリックし、何かを入力してEnterを押します。その後、新しいliが作成されます。したがって、liにはそれぞれkeypressイベントがバインドされており、Enterの後に新しいliが挿入されます。- 次に何かを2番目の
liに入力し、Tabキーを押します。これはliの前にliを入れます。タブプレスイベントもバインドされています。 - もう一度同じ
liをクリックし、Enterキーを押します。ここで問題が発生しています。
新しいliはこの直後に挿入されますが、実際にはliの後に挿入されることが予想されます。
デバッグ後、$（this）がkeypressイベントで処理されたコード内の親liを参照していることがわかります。
なぜこのようなことが起こっているのか教えてください。
$('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で2つのイベント機能を分離することをお勧めします。 – Roljhon
このプロセスはネストされています。だから私はidsと別のクラス名を使用することはできません。 –