How to get all the unique ids and find the clicked id value in jquery?

Question

Here I have an image which is clickable and having 32 unique ids.

I have to find all those ids and have to get which id is clicked and that value what I am trying is not working any help will be appreciated.

Here is my html :

<table width="663" border="0" align="center">
        <tr>
            <td><img src="~/Images/Dental.jpg" width="663" height="474" border="0" usemap="#Map" /></td>
        </tr>
    </table>


    <map name="Map" id="Map">
        <area shape="rect" id="UR8" coords="9,75,45,158" href="#" />
        <area shape="rect" id="UR7" coords="49,77,85,157" href="#" />
        <area shape="rect" id="UR6" coords="89,75,126,159" href="#" />
        <area shape="rect" id="UR5" coords="130,71,161,160" href="#" />
        <area shape="rect" id="UR4" coords="173,73,201,158" href="#" />
        <area shape="rect" id="UR3" coords="208,71,243,156" href="#" />
        <area shape="rect" id="UR2" coords="250,71,281,154" href="#" />
        <area shape="rect" id="UR1" coords="289,70,323,154" href="#" />
        <area shape="rect" id="UL1" coords="331,71,369,154" href="#" />
        <area shape="rect" id="UL2" coords="373,71,405,154" href="#" />
        <area shape="rect" id="UL3" coords="410,71,449,158" href="#" />
        <area shape="rect" id="UL4" coords="453,71,486,157" href="#" />
        <area shape="rect" id="UL5" coords="494,71,528,158" href="#" />
        <area shape="rect" id="UL6" coords="532,72,571,157" href="#" />
        <area shape="rect" id="UL7" coords="576,73,607,158" href="#" />
        <area shape="rect" id="UL8" coords="613,74,647,157" href="#" />
        <area shape="rect" id="LR8" coords="6,317,40,383" href="#" />
        <area shape="rect" id="LR7" coords="49,316,77,393" href="#" />
        <area shape="rect" id="LR6" coords="86,318,123,394" href="#" />
        <area shape="rect" id="LR5" coords="128,315,161,391" href="#" />
        <area shape="rect" id="LR4" coords="168,316,202,391" href="#" />
        <area shape="rect" id="LR3" coords="209,316,241,396" href="#" />
        <area shape="rect" id="LR2" coords="247,316,280,392" href="#" />
        <area shape="rect" id="LR1" coords="288,318,320,393" href="#" />
        <area shape="rect" id="LL1" coords="333,317,362,393" href="#" />
        <area shape="rect" id="LL2" coords="371,318,405,388" href="#" />
        <area shape="rect" id="LL3" coords="413,316,443,394" href="#" />
        <area shape="rect" id="LL4" coords="452,316,483,390" href="#" />
        <area shape="rect" id="LL5" coords="493,318,526,389" href="#" />
        <area shape="rect" id="LL6" coords="530,316,570,391" href="#" />
        <area shape="rect" id="LL7" coords="573,314,606,393" href="#" />
        <area shape="rect" id="LL8" coords="611,312,647,388" href="#" />
    </map> 

And here is the code what I am trying:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        var idArray = [];
        $('#Map').each(function () {
            idArray.push(this.id);
            console.log(this.id)
        });
    });
</script>

Please help.

Thank you.

Answer 1

Use event target for this:

$("#Map").on("click", function(e){
    alert(e.target.id);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="663" border="0" align="center">
    <tr>
         <td><img src="~/Images/Dental.jpg" width="663" height="474" border="0" usemap="#Map" /></td>
    </tr>
</table>


<map name="Map" id="Map">
   <area shape="rect" id="UR8" coords="9,75,45,158" href="#" />
   <area shape="rect" id="UR7" coords="49,77,85,157" href="#" />
   <area shape="rect" id="UR6" coords="89,75,126,159" href="#" />
   <area shape="rect" id="UR5" coords="130,71,161,160" href="#" />
   <area shape="rect" id="UR4" coords="173,73,201,158" href="#" />
   <area shape="rect" id="UR3" coords="208,71,243,156" href="#" />
   <area shape="rect" id="UR2" coords="250,71,281,154" href="#" />
   <area shape="rect" id="UR1" coords="289,70,323,154" href="#" />
   <area shape="rect" id="UL1" coords="331,71,369,154" href="#" />
   <area shape="rect" id="UL2" coords="373,71,405,154" href="#" />
   <area shape="rect" id="UL3" coords="410,71,449,158" href="#" />
   <area shape="rect" id="UL4" coords="453,71,486,157" href="#" />
   <area shape="rect" id="UL5" coords="494,71,528,158" href="#" />
   <area shape="rect" id="UL6" coords="532,72,571,157" href="#" />
   <area shape="rect" id="UL7" coords="576,73,607,158" href="#" />
   <area shape="rect" id="UL8" coords="613,74,647,157" href="#" />
   <area shape="rect" id="LR8" coords="6,317,40,383" href="#" />
   <area shape="rect" id="LR7" coords="49,316,77,393" href="#" />
   <area shape="rect" id="LR6" coords="86,318,123,394" href="#" />
   <area shape="rect" id="LR5" coords="128,315,161,391" href="#" />
   <area shape="rect" id="LR4" coords="168,316,202,391" href="#" />
   <area shape="rect" id="LR3" coords="209,316,241,396" href="#" />
   <area shape="rect" id="LR2" coords="247,316,280,392" href="#" />
   <area shape="rect" id="LR1" coords="288,318,320,393" href="#" />
   <area shape="rect" id="LL1" coords="333,317,362,393" href="#" />
   <area shape="rect" id="LL2" coords="371,318,405,388" href="#" />
   <area shape="rect" id="LL3" coords="413,316,443,394" href="#" />
   <area shape="rect" id="LL4" coords="452,316,483,390" href="#" />
   <area shape="rect" id="LL5" coords="493,318,526,389" href="#" />
   <area shape="rect" id="LL6" coords="530,316,570,391" href="#" />
   <area shape="rect" id="LL7" coords="573,314,606,393" href="#" />
   <area shape="rect" id="LL8" coords="611,312,647,388" href="#" />
</map>
    
<script>
    $(document).ready(function () {
        var idArray = [];
        $('#Map').each(function () {
            idArray.push(this.id);
            console.log(this.id)
        });
        $("#Map").on("click", function(e){
          alert(e.target.id);
        })
    });
</script>

Answer 2

You can use this as your javascript.

$(document).ready(function () {
    var idArray = [];
    $('#Map>area').on('click',function () {
        idArray.push(this.id);
        console.log(this.id)
    });
});