jQuery: Wie bekomme ich eine angeklickte Element-ID?

Question

Also versuche ich die ID eines angeklickten Elements zu bekommen, eigentlich ein div.

Mein Code sieht wie folgt aus:

$(document).ready(function() { 
 
    $(".photo").on("click", function() { 
 
     console.log("Clicked"); 
 
     var id = $(this).attr("id"); 
 
     console.log(id); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="gallery"> 
 
    <div class="wrapper"> 
 
     <img src="foo/img.jpg" class="photo" id="1"> 
 
    </div> 
 
    </div> 
 
</div>

Diese

> Clicked 
> 1 

auf der Konsole zurückkehren. Das funktioniert in diesem Snippet ganz gut, funktioniert aber irgendwie nicht auf meiner eigentlichen Seite.

Es "ignoriert" meinen Klick, als ob er unter etwas ist und nicht angeklickt werden kann.

Wenn ich

$(".gallery").on("click", function() { 

ändern, es funktioniert (wenn ich eine ID natürlich hinzufügen).

Irgendwelche Ideen, wie ich es beheben kann oder was ich verpasst habe?

Thx!

Answer 1

1. You "$ (this) [0]" verwenden können, id name
2. Anfangsbuchstabe von id name empfehlen die Verwendung von don `t erhalten Nummer

$(document).ready(function() { 
 
    $(".gallery").on("click", function() { 
 
     console.log("Clicked"); 
 
     var id = $(this)[0].id; 
 
     console.log(id); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="gallery"> 
 
    <div class="wrapper"> 
 
     <img src="foo/img.jpg" class="photo" id="1"> 
 
    </div> 
 
    </div> 
 
</div>