我正在使用本教程：
http://www.devinrolsen.com/jquery-image-swapping-with-fade-effect/
但我无法让它工作。我相信这与我的其他脚本有些冲突。
我有一个目录，在 catalogue.php 中输入了所有 jquery 操作。然后是显示目录或单个页面的 reader.php。我激活了 simpletabs jquery 脚本。
现在我尝试像上面的教程那样实现 jquery 图像交换。
但是图像点击的事件根本没有开始。我尝试了教程中的所有代码，但它不起作用，它只是将图像单独加载到窗口中。
所以我试图调试它，只是为了显示一个警告框：
$("a.img_thumb").on("click", function (e) {
alert('Works!');
});
但是没有触发警报。（虽然其他 javascript 正在工作，但选项卡、加载程序等）
我也试过：
$(function(){
$("a.img_thumb").on("click", function (e) {
alert('Works!');
});
});
现在我也试过了：
$(document).ready(function() {
$("a.img_thumb").on("click", function (e) {
alert('Works!');
});
});
这些都是我在 catalogue.php 中的所有 jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
<script>
$(document).bind('ajaxStart', function(){
$('#loading').css("display", "block");
}).bind('ajaxStop', function(){
$('#loading').css("display", "none");
});
function show_object(itemid,object_type){
var request = $.ajax({
url: "reader.php",
type: "GET",
data: "id="+ itemid,
dataType: "html"
});
$('table.object_list_' + object_type).hide();
request.done(function(msg) {
$('div.show_object_' + object_type).append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
};
$("a.img_thumb").on("click", function (e) {
alert('Works!');
});
</script>
这是源代码的一部分，图像是从 xml 文件动态创建的
<a href="http://domain.com/itemimages/img50293090.jpg" class="img_thumb">
<img src="http://domain.com/itemimages/img50293090.jpg" alt="pic" class="thumbnail"></a>
谢谢，不知道哪里出错了
附加信息
catalogue.php 和 reader.php 这两个脚本构建了一个目录。名称不好，因为 catalogue.php 除了有一些 css 和 jquery 之外什么都没有。这是 catalogue.php 的整个脚本：
<?php
//If needed, paste
header('Content-Type: text/html; charset=utf-8');
?>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
<script>
$(document).bind('ajaxStart', function(){
$('#loading').css("display", "block");
}).bind('ajaxStop', function(){
$('#loading').css("display", "none");
});
function show_object(itemid,object_type){
var request = $.ajax({
url: "reader.php",
type: "GET",
data: "id="+ itemid,
dataType: "html"
});
$('table.object_list_' + object_type).hide();
request.done(function(msg) {
$('div.show_object_' + object_type).append(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
};
$(document.body).on("click", "a.img_thumb", function (e) {
alert('Works!');
});
</script>
<style type="text/css" media="screen">
@import "css/simpletabs.css";
</style>
<style type="text/css">
#loading {
display:none;
position:absolute;
left:30px;
top:90px;
z-index: 1000;
}
img.list_image {
heigth:90px;
width:90px;
}
td.list_info {
width:150px;
}
p.tab_header {
font-weight:bold;
}
table.infotable {
width:800px;
}
td.key {
width:200px;
}
td.value {
width:400px;
}
#show_info {
width:50%;
float:left;
}
#show_pictures {
width:50%;
float:right;
}
#show_maplinks {
width:100%;
clear:all;
}
#main_image {
width:200px;
margin:3px;
}
#thumbs {
width:200px;
}
img.thumbnail {
max-width:60px;
max-height:60px;
margin:3px;
float:left;
}
</style>
</head>
<body>
<div id="catalogue" class="simpleTabs">
<img src="loading.gif" id="loading"/>
<?php
include('reader.php');
?>
</div>
如果未设置 $_GET['id']，reader.php 将显示包含项目的列表。如果设置了 GET，那么它会显示具有大量数据和图像的单个项目。
reader.php 差不多有 1000 行，所以我不会在这里发布。
但是，正如评论中所讨论的那样。可能是问题出在某种程度上，因为当用户单击列表中的一项时，图像是用 ajax 加载的？所以图像在初始加载时不存在
终于搞定了，谢谢大家！
在创建图像的 reader.php 中，我添加了一个 onclic 函数：
<div id="thumbs">
<?php foreach ($original_images as $image) { ?>
<a href="<?php echo $image['url'] ?>" class="img_thumb">
<img src="<?php echo $image['url'] ?>" alt="kuva" class="thumbnail" onclick="alertme()"/>
</a>
<?php } ?>
</div>
jquery 看起来像这样：
function alertme() {
alert('Works!');
};
这有效。这是怎么回事？