why data-attribute shows undefined while getting data value from HTML element using JQUERY

Question

FIDDLE

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);
})

Answer 1

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");

Working Demo

Answer 2

When using identifier with multiple words, You need to use camelCase notation

var $_target = $(this).data("targetLocation"); //Notice L 
var $_url = $(this).data("targetUrl");

DEMO

Answer 3

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");

Working Example

Answer 4

    $(".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