这是我的代码，现在灯箱正在工作。对话框仅在我们删除灯箱脚本时起作用。任何人都可以建议对话框无法加载的原因是什么？在 Chrome 控制台上，它显示未捕获的类型错误：无法调用 null 的方法"单击"
<?php
include 'header.inc.php';
$floor_id=$_GET['id'];
$path='floorPlanImages';
//include 'addImageForPlan.php';
$select_floor_images=mysql_query("SELECT id,image FROM zb_floorplan_gallery WHERE floor_id='$floor_id'");
if(mysql_num_rows($select_floor_images)>0)
{
?>
<html lang="en">
<!doctype html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<table>
<tr><th colspan="5">Image gallery</th></tr>
<tr>
<?php
$count=0;
while ($display_image=mysql_fetch_assoc($select_floor_images)) {
?>
<td class="<?php echo $display_image['id'];?>" height="100" width="100">
<!-- <img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" rel="lightbox[roadtrip]" class="<?php echo $display_image['id'];?>"></a> -->
<a href="<?php echo $path.'/'.$display_image['image'];?>" rel="lightbox[gallery]" title="Floor Plan images">
<img src="<?php echo $path.'/'.$display_image['image'];?>" width="100%" >
</a>
<a href="#" class="table-icon delete" title="Delete" id="<?php echo $display_image['id'];?>"></a></td>
<?php
$count++;
if($count==4)
{
?></tr><?php $count=0;
}
?>
<script type="text/javascript">
$( document ).ready(function() {
$('#<?php echo $display_image['id'];?>').click(function(){
$( '#<?php echo $display_image['id'];?>').html("Are you sure you want to delete this image?").dialog(
{
buttons: {
'Confirm': function() {
//do something
$.ajax({
type: "POST",
url: "deleteFloorImage.php?id=<?php echo $display_image['id'];?>",
data: { id: "<?php echo $display_image['id'];?>" }
}).done(function( msg ) {
$("td.<?php echo $display_image['id'];?>").hide();
});
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
}
);
});
});
</script>
<?php
}
?>
</table>
<?php
}
else {
echo 'No images found for this floor plan';
}
include 'footer.inc.php';
?>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
观察你的 DOM 以查找错误。
也许这是与lib的jquery冲突。
尝试在之前写jQuery.noConflict();：
$( document ).ready(function().....
并把你的库：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
在调用你的 jquery 库之后
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>