访问动态生成的元素

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

此的jsfiddle显示了发行的问题：https://jsfiddle.net/wgc499n9/

$(this).data('index')出来作为“未定义” - 我想$(this)被引用“文件”，而不是.remove_link;即使event数据似乎也没有任何有用的信息。 $(this).attr('id')也出现'未定义'。

最后，我只需要能够点击该链接删除它所在的行。我怎么能做到这一点？我甚至尝试了内联JS，但是这导致了更奇怪的行为。

P.S.我还了解到，我的动态添加的data-index属性未存储在DOM中; jQuery单独存储它，所以它的包含元素必须通过使用.find() ...但我不知道如何使用.find()来访问我需要的特定单个元素。

来源

2017-07-06 CJG

使用元素事件（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.

来源

2017-07-06 17:24:27

我没有看到其他地方，你应该使用'click事件的target'属性。但是当我打印出事件细节时（使用'JSON.stringify'），'target'显示为一个空对象，所以我认为它不起作用。：/ – CJG

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

这应该工作：

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

来源

2017-07-06 17:24:42 flocks

访问动态生成的元素

回答

相关问题