I am trying to get the data attributes value of an HTML element it shows undefined object[] nothing goes work for me. Check my fiddle.
$(document).on("click", ".modal-open", function() {
var $_target = $($(this).data("targetlocation"));
var $_url = $($(this).data("targeturl"));
console.log($_target);
console.log($_url);
})
You need to use:
var $_target = $(this).attr("data-target-location");
var $_url = $(this).attr("data-target-url");
or
var $_target = $(this).data("target-location");
var $_url = $(this).data("target-url");
if you are going with this html Element
<button type="button" class="modal-open" data-target-url="ajax.html" data-target-location=".overlay"> Modal open </button>
after triggering a click event on button "this" will return same html Element, therefore to fetch current data attribute value of this type.
You should use Camel Casing notation.
var $_target = $(this).data("targetLocation");
var $_url = $(this).data("targetUrl");
$(".modal-open").on("click", function() {
var $_target = $(this).attr("data-target-location");
var $_url = $(this).attr("data-target-url");
alert($_target);
alert($_url);
});
Use this for Getting Attributes
Demo for this shows there Demo There
