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 手冊

將處理程序附加到與當前選擇器匹配的所有元素的事件，現在和將來。