I cannot get the id in jquery

Question

The problem is i want to get the id of the li and alert it, but it i cannot get the value of the id it just alerts an empty string. I'm stuck with this for almost 3 hours.

here is my code:

HTML:

<li id = "3" class = "projectlink">
  <a href="#">
      <div class = "row ellipsis"> 
        <i class = "fa fa-folder-open"> </i>
        <span>My Project</span>
      </div>
  </a>
</li>

JQUERY:

 $(document).on("click",".projectlink",function(){  
    var idx = event.target.id;
    alert(idx);
 });

Any idea what's the problem with this code?

UPDATE

Thanks to vsync! and i'm able to solve the problem. Just edited this code here and it really worked:

$(document).on("click",".projectlink",function(){  
  var idx = this.id;
  alert(idx);
});

Answer 1

You need to define event as callback parameter

$(document).on("click", ".projectlink", function(event) {
  var idx = event.target.id;
  alert(idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="3" class="projectlink">d
  <a href="#" 4 id="">dd
      <div id = "5" class = "row ellipsis"> d
        <i class = "fa fa-folder-open" id = "6">dd </i>
        <span id = "f">My Project</span>
      </div>
  </a>
</li>

The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.

Taken from https://api.jquery.com/event.target/

Update :

So you need to use this.id because event.target property can be the element that registered for the event or a descendant of it which doesn't have any id . this or event.currentTarget refers the element that registered for the event

$(document).on("click", ".projectlink", function() {
  var idx = this.id;
  alert(idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="3" class="projectlink">
  <a href="#">
    <div class="row ellipsis">
      <i class="fa fa-folder-open"> </i>
      <span>My Project</span>
    </div>
  </a>
</li>

Answer 2

There are a few things wrong with your javascript:

• Be sure to specify the event parameter in the click handler.
• Use event.currentTarget or this instead of event.target.
• Recommendation - Make id's more complex, not just numbers.

 $(document).on("click", ".projectlink", function (event) {
     var idx = event.currentTarget.id;
     alert(idx);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="item3" class="projectlink"> <a href="#">
      <div class="row ellipsis"> 
        <i class="fa fa-folder-open"> </i>
        <span>My Project</span>
      </div>
  </a>
</li>

The reason you need to use event.currentTarget instead of event.target has to deal with the event chain. When a click event gets fired the deepest element fires the initial trigger, and then the event is passed up to each parent element for them to handle.

In this example a span is getting clicked on (at least in my browser) and that event bubbles up to the div.row.ellipsis and then up to the li#item3 and then up to body and so on. In other words, once all the click handlers for that element have been executed then the event gets passed up to that element's parent and the cycle continues.

In jQuery when a click event occurs it assigns 'event.targetto the initial element and the current element that has aclickhandler toevent.currentTarget`.

While you can use this to refer to the event.currentTarget, I don't recommend that for a few reasons. Mostly it is due to the danger of context in JavaScript. It is not hard to modify the context that a method runs in, just use Function.prototype.bind(), jQuery.proxy(), or (underscore/lodash's) _.bind(), etc. Since this can be changed, it's best to stick to the dedicated property on event that we can always trust. Likewise using event.currentTarget is much more descriptive that this, which makes it far more maintainable.

Answer 3

In your script, event.target.id is giving an error for "event is not defined". Modify your script to either include event in the call or not use event and work with this pointer as below:

jQuery(document).on("click",".projectlink",function(){  
var idx = this.id;
alert(idx);
});