如何从div中选择一张图像并获取id值

Question

I have some code, I want to get id value from one of image list.

 $(document).ready(function() { $('preview').on('click', '.preview', function() { var imgVal = $(this).attr('id'); alert(imgVal) }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preview"> <img src="https://via.placeholder.com/300/fce/fff.png" id="0" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/dce/fff.png" id="1" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/acb/fff.png" id="2" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/abc/fff.png" id="3" class="img-fluid w-25" /> </div> 

How to get the ID? Thanks

Answer 1

Should be img in the div onclick not div onclick.

 $(document).ready(function(){ $('.preview img').on('click', function () { console.log($(this).attr("id")); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="preview"> <img src="https://via.placeholder.com/300/fce/fff.png" id="0" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/dce/fff.png" id="1" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/acb/fff.png" id="2" class="img-fluid w-25" /> <img src="https://via.placeholder.com/300/abc/fff.png" id="3" class="img-fluid w-25" /> </div>