CODEWITHSUNDEEP
javascriptjqueryhtmlimageonclick
this.that
this.that

Reputation: 97

JQuery image click event is not working

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.

Upvotes: 1

Views: 14026

Answers (6)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8858

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.

Upvotes: 0

kaydubbleu
kaydubbleu

Reputation: 11

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.

Upvotes: 1

Jonathan Lam
Jonathan Lam

Reputation: 17351

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.

Upvotes: 0

edonbajrami
edonbajrami

Reputation: 2206

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>

Upvotes: 0

Alexis Purslane
Alexis Purslane

Reputation: 1390

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.

Upvotes: 4

Related Questions