Question

当我从PHP重新加载带有AJAX的页面时，我似乎无法获得影响enlarge类中每个项目的jQuery函数。 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gallery</title>
        <link rel="stylesheet" href="css/gallery.css"/>
        <script type="text/javascript" 
                src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
        </script>
        <script src="js/enlarge.js"></script>
        <script>
            function showImage(str) {
                if (str.length == 0) {
                    document.getElementById("image").innerHTML = "";
                    return;
                } else {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("image").innerHTML = xmlhttp.responseText;                           
                        }
                    }
                    xmlhttp.open("GET", "info.php?q=" + str, true);
                    xmlhttp.send();
                }

            }
        </script>   
    </head>
    <body>  
            <div id="side-nav">
                <div class="dropdown">
                    <select id="categories" onchange="showImage(this.value)">
                        <option value="All_Cat">All</option>
                        <option value="Inks">Inks</option>
</select>
</div> 
            <!-- IMAGE CONTAINER --> 
            <div id="image"></div>
        </form>
    </body>
</html>

PHP的：

<?php
$folder = "";
$array = array();

// get the q parameter from URL
$q = $_REQUEST["q"];

$display_image = "";

//Switch Statement to evaluate $q
switch ($q) {
    case "All_Cat":
        $folder = './img_gallery/*';
        foreach (glob($folder . '*.*') as $filename) {
        $array[] = $filename;
    }
    foreach ($array as $image) {
        if ($array === "") {
            $display_image = $image;
        } else {
            $display_image .= " <img height=\"100\" width=\"100\" class=\"enlarge\" src='$image'/>";
        }
    }
    break;
   default:
        echo "No images";
}

// Output "no suggestion" if no hint was found or output correct values 
echo $display_image === "" ? "No images" : $display_image;

的JavaScript / JQUERY：

jQuery.noConflict()

jQuery.imageEnlarge = {
    dsettings: {
        enlargeby: 4.3, //default increase factor of enlarged image
        duration: 500, //default duration of animation, in millisec
        imgopacity: 0.2 //opacify of original image when enlarged image overlays it
    },
    zIndexcounter: 100,
    refreshoffsets: function ($window, $target, warpshell) {
        var $offsets = $target.offset()
        var winattrs = {x: $window.scrollLeft(), y: $window.scrollTop(), w: $window.width(), h: $window.height()}
        warpshell.attrs.x = $offsets.left //update x position of original image relative to page
        warpshell.attrs.y = $offsets.top
        warpshell.newattrs.x = winattrs.x + winattrs.w / 2 - warpshell.newattrs.w / 2
        warpshell.newattrs.y = winattrs.y + winattrs.h / 2 - warpshell.newattrs.h / 2
        if (warpshell.newattrs.x < winattrs.x + 5) { //no space to the left?
            warpshell.newattrs.x = winattrs.x + 5
        }
        else if (warpshell.newattrs.x + warpshell.newattrs.w > winattrs.x + winattrs.w) {//no space to the right?
            warpshell.newattrs.x = winattrs.x + 5
        }
        if (warpshell.newattrs.y < winattrs.y + 5) { //no space at the top?
            warpshell.newattrs.y = winattrs.y + 5
        }
    },
    enlarge: function ($, $target, options) {
        var setting = {} //create blank object to store combined settings
        var setting = jQuery.extend(setting, this.dsettings, options)
        var attrs = (options.thumbdimensions) ? {w: options.thumbdimensions[0], h: options.thumbdimensions[1]} : {w: $target.outerWidth(), h: $target.outerHeight()}
        var newattrs = {}
        newattrs.w = (setting.enlargeto) ? setting.enlargeto : Math.round(attrs.w * setting.enlargeby)
        newattrs.h = (setting.enlargeto) ? Math.round(attrs.h * newattrs.w / attrs.w) : Math.round(attrs.h * setting.enlargeby)
        $target.css('cursor', jQuery.imageEnlarge.cursorcss)
        if ($target.data('imgshell')) {
            $target.data('imgshell').$clone.remove()
            $target.css({opacity: 1}).unbind('click.enlarge')
        }
        var $clone = $target.clone().css({position: 'absolute', left: 0, top: 0, visibility: 'hidden', border: '1px solid gray', cursor: 'pointer'}).appendTo(document.body)
        $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
        $target.data('imgshell', {$clone: $clone, attrs: attrs, newattrs: newattrs})
        $target.bind('click.enlarge', function (e) { //action when original image is clicked on
            var $this = $(this).css({opacity: setting.imgopacity})
            var imageinfo = $this.data('imgshell')
            jQuery.imageEnlarge.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
            var $clone = imageinfo.$clone
            $clone.stop().css({zIndex: ++jQuery.imageEnlarge.zIndexcounter, left: imageinfo.attrs.x, top: imageinfo.attrs.y, width: imageinfo.attrs.w, height: imageinfo.attrs.h, opacity: 0, visibility: 'visible', display: 'block'})
                    .animate({opacity: 1, left: imageinfo.newattrs.x, top: imageinfo.newattrs.y, width: imageinfo.newattrs.w, height: imageinfo.newattrs.h}, setting.duration,
                            function () { //callback function after warping is complete
                                //none added        
                            }) //end animate
        }) //end click
        $clone.click(function (e) { //action when enlarged image is clicked on
            var $this = $(this)
            var imageinfo = $this.data('$relatedtarget').data('imgshell')
            jQuery.imageEnlarge.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
            $this.stop().animate({opacity: 0, left: imageinfo.attrs.x, top: imageinfo.attrs.y, width: imageinfo.attrs.w, height: imageinfo.attrs.h}, setting.duration,
                    function () {
                        $this.hide()
                        $this.data('$relatedtarget').css({opacity: 1}) //reveal original image
                    }) //end animate
        }) //end click
    }
};

jQuery.fn.imageEnlarge = function (options) {
    var $ = jQuery
    return this.each(function () { //return jQuery obj
        var $imgref = $(this)
        if (this.tagName != "IMG")
            return true //skip to next matched element
        if (parseInt($imgref.css('width')) > 0 && parseInt($imgref.css('height')) > 0 || options.thumbdimensions) { //if image has explicit width/height attrs defined
            jQuery.imageEnlarge.enlarge($, $imgref, options)
        }
        else if (this.complete) { //account for IE not firing image.onload
            jQuery.imageEnlarge.enlarge($, $imgref, options)
        }
        else {
            $(this).bind('load', function () {
                jQuery.imageEnlarge.enlarge($, $imgref, options)
            })
        }
    })
};

jQuery.fn.applyMagnifier = function (options) { //dynamic version of imageEnlarge() to apply enlarge effect to an image dynamically
    var $ = jQuery
    return this.each(function () { //return jQuery obj
        var $imgref = $(this)
        if (this.tagName != "IMG")
            return true //skip to next matched element

    })

};


//** The following applies the enlarge effect to images with class="enlarge" and optional "data-enlargeby" and "data-enlargeduration" attrs
//** It also looks for links with attr rel="enlarge[targetimageid]" and makes them togglers for that image


jQuery("document").ready(function ($) {
    var $targets = $('.enlarge')
    $targets.each(function (i) {
        var $target = $(this)
        var options = {}
        if ($target.attr('data-enlargeto'))
            options.enlargeto = parseFloat($target.attr('data-enlargeto'))
        if ($target.attr('data-enlargeby'))
            options.enlargeby = parseFloat($target.attr('data-enlargeby'))
        if ($target.attr('data-enlargeduration'))
            options.duration = parseInt($target.attr('data-enlargeduration'))
        $target.imageEnlarge(options)
    })
    var $triggers = $('a[rel^="enlarge["]')
    $triggers.each(function (i) {
        var $trigger = $(this)
        var targetid = $trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='enlarge[id]'
        $trigger.data('enlargeimageid', targetid)
        $trigger.click(function (e) {
            $('#' + $(this).data('enlargeimageid')).trigger('click.enlarge')
            e.preventDefault()
        })
    })
})

AJAX调用函数位于HTML代码中，用于将图像加载到＆＃34;图像＆＃34;容器。我让PHP在img项目中回复了"class="enlarge"，但查询并没有开始。我发现这是因为jQuery在最初启动时加载，并且在调用AJAX时绑定丢失。任何人都可以帮我修复此问题，以便class="enlarge"功能再次有效吗？

已编辑代码：

function addBehaviour() {
    var $targets = $('.enlarge');
    $targets.each(function (i) {
        var $target = $(this);
        var options = {};
        if ($target.attr('data-enlargeto'))
            options.enlargeto = parseFloat($target.attr('data-enlargeto'));
        if ($target.attr('data-enlargeby'))
            options.enlargeby = parseFloat($target.attr('data-enlargeby'));
        if ($target.attr('data-enlargeduration'))
            options.duration = parseInt($target.attr('data-enlargeduration'));
        $target.imageEnlarge(options);
    });
    var $triggers = $('a[rel^="enlarge["]');
    $triggers.each(function (i) {
        var $trigger = $(this);
        var targetid = $trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, ''); //parse 'id' from rel='enlarge[id]'
        $trigger.data('enlargeimageid', targetid);
        $trigger.click(function (e) {
            $('#' + $(this).data('enlargeimageid')).trigger('click.enlarge');
            e.preventDefault();
        });
    });
}

jQuery("document").ready(function ($) {    
   addBehaviour();
});

AJAX：

<script>
            function showImage(str) {
                if (str.length == 0) {
                    document.getElementById("image").innerHTML = "";
                    return;
                } else {
                    var xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function () {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("image").innerHTML = xmlhttp.responseText;   
                            addBehaviour();
                        }
                    }
                    xmlhttp.open("GET", "info.php?q=" + str, true);
                    xmlhttp.send();
                }
            }
        </script>

答案：

注释掉jQuery.noConflict();

Answer 1

您正在将事件附加到文档就绪事件的.enlarge类中，但是在该事件之后加载了使用AJAX加载的内容，因此您需要“重新运行”文档就绪事件的功能。

你可以把它放在一个单独的函数中，并将document ready事件和ajax回调事件附加到同一个函数中。

Answer 2

我建议将行为的应用移到单独的函数中，并使用on()和off()代替click()，如下所示：

function addBehaviour() {
        console.log( 'addBehaviour is called' );
/*       (... your other code...)
         off() removes the behaviour if present, on() adds it. 
         This way it does not get applied multiple times: */

        $trigger.off('click').on('click', function(e) {
            $('#' + $(this).data('enlargeimageid')).trigger('click.enlarge')
            e.preventDefault()
        });

在文档加载上调用函数'addBehaviour'：

jQuery("document").ready(function($) { //....(your other on document ready code)... console.log( 'document ready' ); addBehaviour(); })

在数据通过您的ajax调用到达之后每次调用'addBehaviour'，以便它可以重新应用该行为。

（假设这是用ajax加载东西的部分）

xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("image").innerHTML = xmlhttp.responseText; // HERE: (after you have manipulated the dom) addBehaviour(); } }

加载AJAX内容后的jQuery函数

2 个答案: