追加後にonclickが正しく動作しない

Question

私のコードでは、順不同でリスト項目を作成しています。それぞれには、テキストとアンカータグ（赤い十字記号）が含まれています。ここで私が望むのは、アンカータグをクリックすると、それが入っているリスト項目の子番号が表示されるということです。ページを再読み込みせずにこのタグが必要です。

if (status === 'success') { 
    const i = document.createElement("i"); 
    i.classList.add("fa"); 
    i.classList.add("fa-times"); 
    i.classList.add('red-cross'); 

    const a = document.createElement("a"); 
    a.classList.add("ml-4"); 
    a.append(i); 

    const t = document.createTextNode(txt) 

    const newItem = document.createElement("li"); 
    newItem.append(t); 
    newItem.append(a); 

    $("ul#"+list).append(newItem).on('click', 'li a', function() { 
     const cnt = $("ul#"+list).children().length; 
     console.log(cnt); 
    }); } 

ビュー： Unordered list of items with text and cross sign

予想される出力：クリックすると ×印i番目、出力は私でなければなりません。

現在の出力： 出力は、クリックする番号に関係なく常に6です。

Answer 1

予想される出力：i番目のクロスサイン出力をクリックすると、iが表示されます。

現在の出力：どの番号をクリックしても出力は常に6です。

li番目私をクリックすると、出力私Nの（liのインデックス）（liの総数が）あなたは

const children = $("ul#"+list + " li a").children(); 
const i = children.index(this) + 1 // +1 to count from 1 
console.log(i); 

ような何かをしなければならない必要がある場合これにより、クリックされた位置がどの位置にあるかを確認します。<a>には<i>の1つしかないので、カウントは同じです。

Answer 2

クリック機能は、リンクをクリックするまで実行されません。したがって、const cnt = $("ul#"+list).children().length;はあなたがクリックするまで計算されません。その時点ですべてのアイテムが追加されたと思いますので、そのすべての結果は6です。

あなたは関数がこのように作成されたときに計算を呼び出す必要があり、そのメソッドを使用するには、次の各項目を追加するために、新しいイベントリスナーを追加しますので、これはしかし、良い解決策ではありません

$("ul#"+list).append(newItem).on('click', 'li a', (function() { 
    const cnt = $("ul#"+list).children().length; 

    return function() { 
     console.log(cnt); 
    } 
}())); 

を。あなたは、おそらくのようなものとの優れている：一度だけ行う必要があります

var list = $("ul#test"); 
list.on('click', 'li a', function() { 
    var idx = list.children().index($(this).closest('li')); 
    console.log(idx); 
}); 

、そしてちょうどで新しいアイテムを追加します。

$("ul#test").append(newItem);