JQuery image click event is not working

Question

I want to trigger a JQuery event that shows a textbox when an image is clicked on my page. The HTML code for my page is:

<body>
<div id="left_box">

<ul id="thumbnails">
<li>

<div class="photocontainer" width="100%">
<img class="photo" id="website1" src="photo1.jpg" alt="Click to see enlarged image" />
</div>
</li>
<li>
<div class="photocontainer">
<img class="photo" id="website2" src="photo2.jpg" alt="Click to see enlarged image" />
</div> 
</li>
</ul>
</div>

Now, I have written JQuery code to show a alert when user clicks on image with id="website2". The code is :

<script language="JavaScript" type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js">

  $('#website2').on("click","img,div", function (e) {
            e.preventDefault();
            alert('You Clicked Me');
       });

    </script>

However, nothing happens on image click event. Can anyone tell me where I am going wrong?

Thanks in advance.

score 4 · Accepted Answer · answered Nov 11 '15 at 00:31

4

Try this javascript code:

$(document).ready(function () {
    $(".photo#website2").click(function () {
        alert("This image has been clicked!");
    });
})

Also, separate the importing of your JQuery library from your code.

answered Nov 11 '15 at 00:31

Alexis Dumas

1,299
11
30

score 1 · Answer 2 · answered Nov 11 '15 at 00:40

First you need to close the top tag and put your other javascript in its own block.

Then instead of selecting the #website2 element, you can select all of the images inside .photocontainers by doing

$(document).on("click", ".photocontainer img", function(e) {

instead of your selector. There are of course various ways to do this but basically you want to attach the listener to the document, and the second parameter is the selector.

Here is a fiddle to show you what I mean in action and of course read the jQuery on() documentation.

Mohamed-Yousef · Answer 3 · 2015-11-11T00:50:14.897

1st script with src should be separated with script with code

<script  type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js"></script>
<script>
  // your js code here
</script>

2nd change

$('#website2').on("click","img,div", function (e) {

with

    $('body').on("click","#website2", function (e) { // if you dynamically append your elements
   // if not just use
   $("#website2").on('click',function(){
       // code here
   });

no need to use e.preventDefault(); .. you use it to prevent the page from reloading

for full code

<script  type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js"></script>
<script>
          $(document).ready(function(){
             $(".photocontainer img.photo").on('click',function(){
                  // code here
                  alert($(this).attr('src'));
              });
          });
</script>

and be sure you already have jquery-1.2.6.min.js file in /marketplaces/js/ folder

score 0 · Answer 4 · answered Nov 11 '15 at 00:31

You add just event on #website2

$("body").on("click", ".photo", function(e) {
  e.preventDefault();
  alert("You clicked me");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="left_box">

<ul id="thumbnails">
<li>

<div class="photocontainer" width="100%">
<img class="photo" id="website1" src="photo1.jpg" alt="Click to see enlarged image" />
</div>
</li>
<li>
<div class="photocontainer">
<img class="photo" id="website2" src="photo2.jpg" alt="Click to see enlarged image" />
</div> 
</li>
</ul>
  </div>
  </body>

score 0 · Answer 5 · edited May 23 '17 at 12:03

You cannot have the jQuery script in the <script> tag that gets the jQuery.

As per this SO answer:

Different browsers treat this differently. Some run the content only if the src is included without error. Some run it after attempting to include the src script, regardless of success. Since this behaviour is unreliable (and prohibited in HTML5), it should be avoided.

Apparently, it is unreliable and doesn't work on your browser.

And also, you can use jQuery's built in, simpler click() event handler:

$("#website2").click(function() {
    // code here
});

See working example on JSFiddle.net.

score 0 · Answer 6 · answered Nov 11 '15 at 00:43

If you wish to alert() with id="website2" then :

$("#website2").on("click",function()
{
    alert();
});

If you wish to alert() with any image that starts with id="website" then

$("[id^=website]").on("click",function()
    {
        alert();
    });

You don't need e.preventDefault() as click on image neither posts the form or reloads the page. Also, you don't need to attach click event to div since they are only containers to img elements.

JQuery image click event is not working

6 Answers6