javascript - 访问动态生成的元素

Question

添加动态添加的元素时，如何获取该元素的属性(例如，单击它时)？我发现我需要委托(delegate)一个事件，但我仍然无法访问该事件的任何属性。

这个 JSFiddle 显示了问题:https://jsfiddle.net/wgc499n9/

$(this).data('index') 显示为“未定义” - 我认为 $(this) 引用的是“文档”而不是 .remove_link;即使事件数据似乎也没有任何有用的信息。 $(this).attr('id') 也显示为“未定义”。

最后，我只需要能够单击remove 链接即可删除它所在的行。我怎样才能做到这一点？我什至尝试过内联 JS，但这导致了更奇怪的行为。

附注我还了解到我动态添加的 data-index 属性没有存储在 DOM 中； jQuery 单独存储它，因此必须使用 .find() 访问它的包含元素...但我不知道如何使用 .find()访问我需要的特定单个元素。

Answer 1

使用元素 event(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.