Ajax 请求和 jquery 冲突

Question

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

一切正常，直到我通过 ajax 加载不同的图像（另一类图像，另一组）。 （jquery 的load() function） 一切正常，但是出现了 javascript 的问题。

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

AJAX 之前

第一类图片/缩略图

<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 调用后

第 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 标签与最旧的图片具有相同的 class。 但是当我调用 function 包含：

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

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

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

我想知道当通过 jquery.load() 加载 external.php 文件时，这些新创建的<a class="thumbnail">标签和main.js之间的链接是否丢失。 就像我必须在jquery.load() function 之后重新加载main.js 或类似的东西...

谢谢！

编辑这是代码：

• 单击指向不同类别的链接时
  .linkSubCat 是不同的类别

  $(".linkSubCat").click(function(){loadImages($(this).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();
?>

所以一切都在做它应该做的事情。 这就是问题所在。 main.js 中的 javascript 代码：

$(".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“实时”事件绑定，例如

而不是这个

$(".thumbnail").click(

用这个

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

---

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

来自 jQuery 手册

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