CODEWITHSUNDEEP
javascriptjqueryhtml
denn1s
denn1s

Reputation: 155

Can't retrieve data attributes from HTML generated by JQuery

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

Upvotes: 0

Views: 38

Answers (1)

brk
brk

Reputation: 50346

Try by using $(this)

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

Upvotes: 3

Related Questions