jQuery单击图像没有任何作用

Question

I am trying to get some jQuery code to execute when an image is clicked, my problem is that it will only execute if I click just off the image. 我试图让一些jQuery代码在单击图像时执行，但我的问题是，仅在单击图像时才执行。 I figure my problem is that I have all images being put inside a div named photo with fixed width and heights. 我发现我的问题是我将所有图像放置在名为photo的div中，且具有固定的宽度和高度。 The images are constrained to fit inside the div without distorting the image from its original constraints. 图像被约束为适合div的内部，而不会使图像偏离其原始约束。 The image will not fill the div so when I click just outside of the image I am clicking on the div not the image. 该图像将不会填充div，因此当我单击图像外部时，我将单击div而不是图像。 How am I able to change my code below so that it will only execute if an image inside the photo div is clicked? 我如何才能在下面更改代码，使其仅在单击photo div中的图像时才执行？ I am new to jQuery so please forgive my question if it is a rather simple fix. 我是jQuery的新手，所以如果这是一个非常简单的修复程序，请原谅我的问题。

$("body").click(function(event) {
    var $target = $(event.target).attr('class');
    var $idOfPhoto = event.target.id;
    if ($target == "photo") {
$('#lightBox').lightbox_me({
    centered:true,
    onLoad:function() {
        $('#lightBox').empty();
        $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
    }
});

}
});

Here is the code in its entirety: 这是完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Victoria Mendiola</title>
        <link rel="stylesheet" href="css/style.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="css/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="css/jquery.jscrollpane.min.js"></script>
        <script src="/resources/library/jquery.lightbox_me.js"></script>
        <script src="/resources/library/jquery.browser.js"></script>
        <script src="jquery.cycle.all.js"></script>
    </head>

<body>
    <div id="lightBox">

    </div>
    <div class="container">
        <div class="logo">
        <img class="victoriaLogo" src="images/Victoria-logo.png" />
        </div>
        <div class="navigation">
            <a class="navText" href="index.php">Home</a>
            <a class="navText" href="gallery.php">Gallery</a>
            <a class="navText" href="#about">About</a>
            <a class="navText" href="contact.php">Contact</a>
        </div>
    <script>
        $(function()
{
    $('.galleryContainer').jScrollPane();
});
    </script>
    <div class="galleryContainer">
<?php
require 'DB.php';

    try{      
    $stmt ='SELECT * FROM victoria';
    foreach ($conn->query($stmt) as $row)
        {
        echo ('<div class="photo" id="' . $row['name'] . '"> 
        <img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');

        }
    }  catch (PDOException $e){
        echo 'Connection failed: ' . $e->getMessage();
    }


?>
    </div>

    <script>
        $("body").click(function(event) {
            var $target = $(event.target).attr('class');
            var $idOfPhoto = event.target.id;
            if ($target == "photo") {
        $('#lightBox').lightbox_me({
            centered:true,
            onLoad:function() {
                $('#lightBox').empty();
                $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
            }
        });

        }
        });
</script>
</div>
</body>

</html>

Answer 1

$('.photo').click(function() {
  $('#lightBox').lightbox_me({
    centered:true,
    onLoad:function() {
      $('#lightBox').empty();
      $('#lightBox').prepend('<img src="/Victoria/images/photoGallery/' + $idOfPhoto + '" />');
    }
  });
});

jQuery单击图像没有任何作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-09-16 01:55:09

jQuery单击图像没有任何作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-09-16 01:55:09

解决方案1
1 已采纳 2013-09-16 01:55:09