Can't retrieve data attributes from HTML generated by JQuery

Question

I am trying to retrieve the data- attributes on button on HTML that was loaded from JQuery, I know this causes issues.

I can get the button click to register however I can not access any of the attributes.

$(document).on("click", ".reportRequest", function(e){
    console.log($(e.relatedTarget).data("ip"));
});

Here is the javascript and it returns undefined even though when I can see in inspect element that the button has assigned values

The HTML of the button is:

<button title="Report Request" class="btn btn-info pull-right reportRequest" data-toggle="modal" data-target="#shoutoutReportModal" data-ip="127.0.0.1" data-id="52"><i class="fa fa-flag" aria-hidden="true"></i></button>

I believe the issue is because the HTML is generated on page load with an AJAX request.

Any help will be appreciated

From the jQuery docs: .relatedTarget -> "The other DOM element involved in the event, if any." - What other element should be involved in clicking a button? — Andreas
– Andreas, Commented Mar 3, 2018 at 15:32

brk · Accepted Answer · 2018-03-03 15:30:28Z

3

Try by using $(this)

$(document).on("click", ".reportRequest", function(e){
    console.log($(this).data("ip"));
});

answered Mar 3, 2018 at 15:30

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

denn1s Over a year ago

Perfect! Thank you very much

Collectives™ on Stack Overflow

Can't retrieve data attributes from HTML generated by JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related