動的に生成された要素へのアクセス

Question

動的に追加された要素を追加するとき、その要素の属性を取得するにはどうすればいいですか？イベントを委任する必要があることがわかりましたが、そのイベントの属性にはまだアクセスできません。

このJSFiddleは、問題の問題を示していますhttps://jsfiddle.net/wgc499n9/

$(this).data('index')は「未定義」として起動します - 私は$(this)はなく.remove_linkの「ドキュメント」を参照していると思います。 eventデータであっても、その中に有用な情報がないようです。 $(this).attr('id')も ​​'undefined'と表示されます。

最後に、そのremoveリンクをクリックするだけで、その行が削除されている必要があります。どうすればそれを達成できますか？私はインラインJSを試したことさえありましたが、それは見知らぬ行動を引き起こしました。

P.S.私はまた、動的に追加されたdata-index属性がDOMに格納されていないことを知りました。 jQueryはそれを別々に保存します。そのため、含まれる要素には.find()を使用してアクセスする必要がありますが、.find()を使用して必要な個々の要素にアクセスする方法を理解できません。

Answer 1

使用要素イベント（e）のパラメータの代わりにこの：詳細については

let i = 0; 
 
$('#add').on('click',() => { 
 
    $('#container').append(`<div>row #${(i+1)} <a "href="#" data-index="${i}" class="remove_link">remove</a></div>`); 
 
    i++; 
 
}) 
 

 
$(document).on('click', '.remove_link', (e) => { 
 
    //alert(JSON.stringify(e)); 
 
    alert($(e.target).data('index')); 
 
})

.remove_link { 
 
    color: red; 
 
    font-size: 0.8em; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="add">Add row</button> 
 
<div id="container"></div>

はあなたのイベントハンドラでdifference b/w $(this) ans event.target.

Answer 2

を読んで、thisは、ウィンドウを表します。クリックした要素を取得するには、e.targetにアクセスしてください。

これは著作必要があります。

$('#container').on('click', '.remove_link', (e) => { 
    alert($(e.target).data('index')); 
})