访问动态生成的元素

Question

When adding a dynamically added element, how can I get attributes for that element (when clicking on it, for example)? I figured out that I need to delegate an event, but I still can't access any of the attributes of that event.

This JSFiddle shows the issue problem: https://jsfiddle.net/wgc499n9/

$(this).data('index') comes up as 'undefined' - I think $(this) is referencing 'document' instead of .remove_link ; even the event data doesn't seem to have any useful information in it. $(this).attr('id') also comes up as 'undefined'.

In the end, I just need to be able to click that remove link to remove the row it's on. How can I accomplish that? I even tried inline JS, but that caused even stranger behavior.

PS I also learned that my dynamically added data-index attribute is not stored in the DOM; jQuery stores it separately, so its containing element has to be accessed by using .find() ...but I can't figure out how to use .find() to access the specific individual elements I need.

Answer 1

Use element event(e) parameter instead this:

 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> 

For more detail read difference b/w $(this) ans event.target.

Answer 2

In your event handler, this represent window. You have access to e.target to get the clicked element.

This should works:

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