Question

我有gallery.php，它从数据库加载带有src路径的图像我还有一个外部main.js，用于检测.thumbnail上的点击。

在我通过ajax加载不同的图像（另一类图像，另一组）之前，一切都完美无瑕。（jquery的load()函数）一切都很好，但是出现了javascript问题。

之后，我无法检索缩略图的src属性。这就是我的意思。

在AJAX之前

第1类图片/缩略图

<a class="thumbnail"><img src="ressources/images/image1Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image2Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image3Small.jpg" /></a>';

等等......

AJAX CALL

第2类图片/缩略图

<a class="thumbnail"><img src="ressources/images/image4Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image5Small.jpg" /></a>';
<a class="thumbnail"><img src="ressources/images/image6Small.jpg" /></a>';

正如你所看到的，一切都像以前一样。 a标签与旧图片的版本相同。但是当我调用包含：

的函数时

var path = $(this).children().attr("src");

现在返回：undefined而不是ressources/images/imageXSmall.jpg

我尝试检查$(this)之后是否返回了其他内容，但没有成功。

我想知道当通过jquery.load（）加载外部.php文件时，新创建的<a class="thumbnail">标记与main.js之间的链接是否丢失。就像我必须在main.js函数之后重新加载jquery.load()一样。或类似的......

谢谢！

编辑以下是代码：

点击指向其他人的链接时类别
.linkSubCat是不同的类别
。
$（ “linkSubCat ”）点击（函数（）{loadImages（$（本）.attr（“ ID”））;}）;

然后

function loadImages(pCategory) {
    switch (pCategory) {
        case "subCat00":
            $(".pics").load('loadImages.php',{category:0});
            break;
        case "subCat01":
            $(".pics").load('loadImages.php',{category:1});
            break;
        case "subCat02":
            $(".pics").load('loadImages.php',{category:2});
            break;
        case "subCat03":
            $(".pics").load('loadImages.php',{category:3});
            break;
        default:
            $(".pics").load('loadImages.php',{category:0});
            break;
    }
}

loadImages.php

<?php
    $connection = mysql_connect("localhost","root", "") or die("Error Connecting : " . mysql_error());

    if (!mysql_select_db("taktak")) die('Error connecting to database : ' . mysql_error());

    function createThumbPHP() {
        if(isset($_POST['category'])) {
            if($_POST['category'] == 0){
                $imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 0");
                $thumbHtml = '';

                while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
                    $thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
                }
            }elseif($_POST['category'] == 1){
                $imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 1");
                $thumbHtml = '';

                while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
                    $thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
                }
            }elseif($_POST['category'] == 2){
                $imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 2");
                $thumbHtml = '';

                while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
                    $thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
                }
            }elseif($_POST['category'] == 3){
                $imageQuery = mysql_query("SELECT * FROM t_pictures WHERE p_category = 3");
                $thumbHtml = '';

                while ($tempImageQueryFetch = mysql_fetch_assoc($imageQuery)){
                    $thumbHtml .= '<a href="#" class="thumbnail"><img src="ressources/images/' . $tempImageQueryFetch["p_fileName"] . 'Small.jpg" /></a>';
                }
            }
        return $thumbHtml;
        }
        else {
            $errorMSG = "Error Loading Images";
            return $errorMSG;
        }
    }

    echo createThumbPHP();
?>

所以一切都按照它应该做的去做。这是个问题。这个javascript代码在main.js中：

$(".thumbnail").click(
            function(){
                $('#imageBig img').remove();

                var path = $(this).children().attr("src");
                var newPath = path.substring(0, path.length-9);
                var newPath2 = newPath += ".jpg";

                var imageLoad = new Image();

                $(imageLoad).load(function () {
                    if (--imageLoad == 0) {
                        // ALL DONE!
                    }
                    // anything in this function will execute after the image loads
                    $('#loader').hide();
                    var newImg = $('<img />').attr('src',$(this).attr('src'));
                    $('#imageBig').append( $(newImg) ); // I assume this is the code you wanted to execute
                })
                .attr('src',newPath2);
            }
        )

它删除了#imageBig中的img，但似乎没有得到$(this).children().attr("src");的路径这个脚本在我加载不同的缩略图之前工作得很好（即使使用相同的设置（类，顺序......））

Answer 1

尝试使用jQuery "live"事件绑定，例如

而不是

$（ “缩略图”）。单击（

使用此

$('.thumbnail').live('click',

使用常规事件绑定器（例如$.click()）时，处理程序仅绑定到调用时匹配的元素。当您通过AJAX加载新元素时，这些元素将不受约束。

来自jQuery手册

为现在和将来与当前选择器匹配的所有元素附加事件的处理程序。

Ajax请求和jquery冲突

1 个答案: