0
當我使用AJAX從PHP重新加載頁面時，似乎無法獲得影響enlarge類中每個項目的jQuery函數。 HTML：AJAX內容加載後的jQuery函數
<!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代碼中。我有PHP迴應"class="enlarge"內img項目，但查詢不啓動。我發現這是因爲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();
對不起，這個新的AJAX和JQuery。我會在哪裏將'addBehaviour'函數放在ajax中以便每次調用它？ – Shortcircuit
我剛剛更新了我的答案，請讓我知道如果我的假設是正確的 –
好吧，那正是我的想法。確定是因爲它似乎還沒有調用或加載函數。 – Shortcircuit