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.

• javascript
• jquery
• html

• 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 like mouseenter and mouseleave, not click. – 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 5

Instead 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.