Ajax请求和jquery冲突

问题描述

| 我有gallery.PHP从数据库中加载带有src路径的图像。 我也有一个外部main.js，它检测到单击“ 0”的情况。 一切正常，直到我通过ajax加载不同的图像（另一类图像，另一组图像）为止。 （jquery的“ 1”函数）一切都很好，但是出现了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通话后 类别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>\';

如您所见，一切都像以前一样。标签与旧照片具有相同的类别。但是当我调用包含以下内容的函数时：

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

现在返回：

undefined

，而不是

ressources/images/imageXSmall.jpg

我尝试检查

$(this)

之后是否返回了其他内容，但没有成功。 我想知道是否通过jquery.load（）加载了外部.PHP文件时，这些新创建的

<a class=\"thumbnail\">

标签和

main.js

之间的链接丢失了。就像我必须在

jquery.load()

函数之后重新加载

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\");

的路径。在我加载不同的缩略图（即使使用相同的设置（类，顺序，...））之前，该脚本也可以正常工作     

解决方法

        尝试使用jQuery \“ live \”事件绑定，例如 代替这个   $（\“。thumbnail \”）。click（ 用这个

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

当使用常规事件绑定程序（例如

$.click()

）时，处理程序仅绑定到调用时匹配的那些元素。通过AJAX加载新元素时，这些元素将不会绑定。 从jQuery手册   现在和将来将与当前选择器匹配的所有元素的事件处理程序附加到事件。