I am newbie to html and java-script ,trying to fire a click event when page load finished
$(document).ready(function(event){
$("#london").click(function(event){
openCity(event,'London');
});
$("#london").trigger('click'); //this is automatic click
});
This click is working.But in my function
function openCity(evt, cityName) {
var id = evt.toElement.id; //id is undefined only when click event triggered
}
id
is undefined only when click event triggered,when normal click it contains value.
I am newbie to html and java-script ,trying to fire a click event when page load finished
$(document).ready(function(event){
$("#london").click(function(event){
openCity(event,'London');
});
$("#london").trigger('click'); //this is automatic click
});
This click is working.But in my function
function openCity(evt, cityName) {
var id = evt.toElement.id; //id is undefined only when click event triggered
}
id
is undefined only when click event triggered,when normal click it contains value.
- did you try $(this).id with openCity(this,'London') – hasan Commented Aug 15, 2017 at 17:34
- Thank you for your reply,i will try – CLIFFORD P Y Commented Aug 15, 2017 at 17:35
-
2
toElement
is a nonstandard property, and it's only applicable for events likemouseenter
andmouseleave
, notclick
. – Barmar Commented Aug 15, 2017 at 17:35 - See stackoverflow./questions/31865416/… – Barmar Commented Aug 15, 2017 at 17:36
- @CLIFFORDPY your wele:). I hope it works as you wish – hasan Commented Aug 15, 2017 at 17:44
5 Answers
Reset to default 4Instead of toElement you need to use target.
For more info I'd suggest to read What is the difference between Event.target, Event.toElement and Event.srcElement?
function openCity(evt, cityName) {
var id = evt.target.id; //id is undefined only when click event triggered
console.log('id: ' + id);
}
$("#london").click(function(event){
openCity(event,'London');
});
$("#london").trigger('click'); //this is automatic click
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="london">london</button>
Use evt.target.id
instead of toElement
- see demo below:
$(document).ready(function(event) {
$("#london").click(function(event) {
openCity(event, 'London');
});
$("#london").trigger('click'); //this is automatic click
});
function openCity(evt, cityName) {
var id = evt.target.id;
console.log(id);
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='london'>London</div>
You can use this
keyword for your function like following.
function openCity(element, cityName) {
var id = element.id;
console.log('id: ' + id);
}
$("#london").click(function(event){
openCity(this,'London');
});
$("#london").trigger('click'); //this is automatic click
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="london">london</button>
You better use this
inside the function, and then attr('id')
to get the relevant attribute:
function openCity(el, cityName) {
var id = $(el).attr('id');
console.log(id);
}
$(document).ready(function(event){
$("#london").click(function(event) {
openCity(this, 'London');
});
$("#london").trigger('click'); //this is automatic click
});
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="london">London</div>
this
in your context is the relevant elements that was clicked.
Use event.currentTarget
to get the bound element.
function openCity(evt, cityName) {
var id = evt.currentTarget.id;
}
This is a standard property of the event
object. It yields the same value as this
would in the handler. That way you can still just pass around the event
object and have the target
, the currentTarget
and all the other event data as well.
Keep in mind that the target
and currentTarget
may be two different elements. The target
is the most deeply nested element clicked, whereas the currentTarget
is always the bound element.
Since you want the element that has the id
, using currentTarget
will be safer. Doesn't matter for the .trigger()
call, but may for the actual, human clicks if you have nested elements.