I have the next structure:
<div class="location" onclick="hide();">
<div class="cat_row"></div>
<div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>
And my hide function():
var hide = function(){
var latitude = $(this).children('.coordinates').data('latitude');
var alert_this = $(this).children('.coordinates').data('latitude');
alert(alert_this);
}
and it prints undefined. What is the problem?
The problem is in hide, this refers to the window object not the clicked .location element.
One solution is to pass the location reference as a parameter to hide like
<div class="location" onclick="hide(this);">
<div class="cat_row"></div>
<div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>
then
var hide = function(el){
var latitude = $(el).children('.coordinates').data('latitude');
var alert_this = $(el).children('.coordinates').data('latitude');
alert(alert_this);
}
Cache the selector
var hide = function (el) {
var $cord = $(el).children('.coordinates');
var latitude = $cord.data('latitude');
var alert_this = $cord.data('latitude');
alert(alert_this);
}
The issue is because when you attach an event handler using an onclick attribute the this keyword does not refer to the element which raised the event. You have two options. First you can supply this as a parameter:
<div class="location" onclick="hide(this);">
<!-- content -->
</div>
var hide = function(el) {
var latitude = $(el).children('.coordinates').data('latitude');
var alert_this = $(el).children('.coordinates').data('latitude');
alert(alert_this);
}
Alternatively you can attach the event in JS itself:
<div class="location">
<!-- content -->
</div>
$('.location').click(function() {
var latitude = $(this).children('.coordinates').data('latitude');
var alert_this = $(this).children('.coordinates').data('latitude');
alert(alert_this);
});
First of, look at Arun P Johny's answer. If you use onclick Event from the Tag-Element, it will refer to window.
I would suggest you to use the click event, so you can use $(this).
$( '.location' ).click( function() {
var coordinates = $( this ).children( '.coordinates' );
var longitude = coordinates.data( 'longitude' );
var latitude = coordiantes.data( 'latitude' );
console.log( 'Latitude: ' + latitude, 'Longitude: ' + longitude );
} );
You need to pass this to hide function:
<div class="location" onclick="hide(this);">
<div class="cat_row"></div>
<div class="coordinates" data-latitude="51.412176" data-longitude="-0.701547"></div>
</div>
var hide = function(self){
var latitude = $(self).children('.coordinates').data('latitude');
var alert_this = $(self).children('.coordinates').data('latitude');
alert(alert_this);
}
but it's better to use jQuery to add event:
$('.location').click(funtion() {
var latitude = $(this).children('.coordinates').data('latitude');
var alert_this = $(this).children('.coordinates').data('latitude');
alert(alert_this);
});
