Question

添加动态添加的元素时，如何获取该元素的属性（例如，点击它时）？我发现我需要委托一个活动，但我仍然无法访问该活动的任何属性。

此JSFiddle显示问题：https://jsfiddle.net/wgc499n9/

$(this).data('index')出现＆＃39; undefined＆＃39; - 我认为$(this)正在引用＆＃39;文档＆＃39;而不是.remove_link;即使event数据似乎也没有任何有用的信息。 $(this).attr('id')也出现在＆＃39; undefined＆＃39;。

最后，我只需要点击remove链接即可删除它所在的行。我怎么能做到这一点？我甚至尝试过内联JS，但这引起了更奇怪的行为。

P.S。我还了解到我的动态添加的data-index属性没有存储在DOM中; jQuery单独存储它，因此必须使用.find()来访问其包含元素...但我无法弄清楚如何使用.find()来访问我需要的特定单个元素。 / p>

Answer 1

使用元素事件（e）参数代替：

＆＃13;

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'));
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

有关详细信息，请参阅difference b/w $(this) ans event.target.

Answer 2

在您的事件处理程序中，this代表窗口。您可以访问e.target以获取点击的元素。

这应该有效：

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

访问动态生成的元素

2 个答案: