Home/ Questions/Q 8082215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T17:00:50+00:00

I am using jquery and I would like to find the src of the

  • 0

I am using jquery and I would like to find the src of the image that I click on but I would also like to be able to click on the outerdiv and not just click on the image itself. My code is all here and can be copied and pasted into an editor. This is simplified code but my project generates the tags from a database and output to the webpage using PHP. It works fine if I click on the image but not if I click on the innerdiv or outerdiv. Any help would be greatly appreciated, I’m just begining to use jquery,
Thanks.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Select src</title>

    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
      $(document).ready(function() {
          $(".outerdiv img").click(function(){  //output variable 'theImage' when outerdiv is clicked
              var theImage = $(this).attr('src');
              alert("The image source is: " + theImage);
          });
  }); //end of document ready function
    </script>

    <style>
        .outerdiv {width: 300px; height: 200px; border: thin solid #000000;}
        .innerdiv {width: 160px; height: 160px; border: thin solid #0099FF;}
        .innerdiv img {width: 120px; height: 120px; border: thin solid #FF3300;}
    </style>

</head>

<body>

<div class="outerdiv">outerdiv
    <div class="innerdiv">innerdiv
        <img src="image1.jpg">
    </div><!--/innerdiv-->
</div><!--/outerdiv-->

<div class="outerdiv">outerdiv
    <div class="innerdiv">innerdiv
        <img src="image2.jpg">
    </div><!--/innerdiv-->
</div><!--/outerdiv-->

<div class="outerdiv">outerdiv
    <div class="innerdiv">innerdiv
        <img src="image3.jpg">
    </div><!--/innerdiv-->
</div><!--/outerdiv-->

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
      jQuery(".outerdiv").add("innerdiv").add("img").click(function (){
    var target = $(this);
    var src = target.attr("src") || target.find("img").attr("src");
  });
    • 0