添加动态添加的元素时,如何获取该元素的属性(例如,单击它时)?我发现我需要委托(delegate)一个事件,但我仍然无法访问该事件的任何属性。
这个 JSFiddle 显示了问题:https://jsfiddle.net/wgc499n9/
$(this).data('index')
显示为“未定义” - 我认为 $(this)
引用的是“文档”而不是 .remove_link
;即使事件
数据似乎也没有任何有用的信息。 $(this).attr('id')
也显示为“未定义”。
最后,我只需要能够单击remove
链接即可删除它所在的行。我怎样才能做到这一点?我什至尝试过内联 JS,但这导致了更奇怪的行为。
附注我还了解到我动态添加的 data-index
属性没有存储在 DOM 中; jQuery 单独存储它,因此必须使用 .find()
访问它的包含元素...但我不知道如何使用 .find()
访问我需要的特定单个元素。
最佳答案
使用元素 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.
关于javascript - 访问动态生成的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44955233/