我正在尝试使用Jquery功能在其中运行页面，当我执行ajax POSt时发生了什么，它在警报框中成功显示消息，然后再次重新加载整个页面然后它无法再次运行，并在点显示错误，如
$fancybox in undefined, sometimes it shows t is undefined
但是再次更新页面等其他功能不起作用。以下是我试过的以下代码
<html>
<head>
<title>View Images</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css">
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom2").fancybox({
'zoomSpeedIn' :500,
'zoomSpeedOut' :500,
'overlayShow' :false,
'width' :800,
'height' :600
});
$(".mychecks").click(function(e) {
var data = $("#frmImages").serialize();
var mainID = $("#mainID").val();
$.ajax({
type:"POST",
url:"actionImages.cfm?action=update",
cache:false,
data:data,
success:function(html) {
var i = $("#msg").html(html).text().replace('/\s+/g', ' ');
alert(i);
$('#reloadImages').load('viewImages.cfm?ID=' + mainID + '&user=myname');
}
});
});
});
function checkboxes(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z<theForm.length;z++){
if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
theForm[z].checked = theElement.checked;
}
}
}
</script>
</head>
<body style="background:white;">
<div id="reloadImages">
<form name="frmImages" id="frmImages">
<table align="center" width="100%" cellpadding="1" cellspacing="2">
<tr>
<td colspan="4" align="center"><div style="display:none;" id="msg"></div></td>
</tr>
<tr>
<td colspan="4" align="left" class="BlackBold20"><strong>View Images</strong></td>
</tr>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Freshy_FRESH_OVAL_OVAL.jpg"> <IMG src="/small/5643.jpg" border='0'></a><br>
<a title="Delete this Image - 5643.jpg" style="cursor:pointer;" id="Del~47780~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47780" id="display_1_47780" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47780" id="display_0_47780" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47780" id="submitter_47780">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47780" id="headerImage_47780">
<option value="0" >No</option>
<option value="1" selected="selected">Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Chrysanthemum_13D4294A55.jpg"> <IMG src="/small/5643-Chrysanthemum_13D4294A55.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Chrysanthemum_13D4294A55.jpg" style="cursor:pointer;" id="Del~47787~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47787" id="display_1_47787" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47787" id="display_0_47787" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47787" id="submitter_47787">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47787" id="headerImage_47787">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Desert_73A8B513FA.jpg"> <IMG src="/small/5643-Desert_73A8B513FA.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Desert_73A8B513FA.jpg" style="cursor:pointer;" id="Del~47788~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47788" id="display_1_47788" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47788" id="display_0_47788" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47788" id="submitter_47788">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47788" id="headerImage_47788">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Hydrangeas_B1AE8A300E.jpg"> <IMG src="/small/5643-Hydrangeas_B1AE8A300E.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Hydrangeas_B1AE8A300E.jpg" style="cursor:pointer;" id="Del~47789~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47789" id="display_1_47789" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47789" id="display_0_47789" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47789" id="submitter_47789">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47789" id="headerImage_47789">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<span class="dropdownb">
</tr>
</span>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Jellyfish_BFEB8F8D8F.jpg"> <IMG src="/small/5643-Jellyfish_BFEB8F8D8F.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Jellyfish_BFEB8F8D8F.jpg" style="cursor:pointer;" id="Del~47790~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47790" id="display_1_47790" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47790" id="display_0_47790" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47790" id="submitter_47790">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47790" id="headerImage_47790">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Koala_3BF9D36D8F.jpg"> <IMG src="/small/5643-Koala_3BF9D36D8F.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Koala_3BF9D36D8F.jpg" style="cursor:pointer;" id="Del~47791~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47791" id="display_1_47791" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47791" id="display_0_47791" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47791" id="submitter_47791">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47791" id="headerImage_47791">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-lamborghini-82a_05F51070AB.jpg"> <IMG src="/small/5643-lamborghini-82a_05F51070AB.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-lamborghini-82a_05F51070AB.jpg" style="cursor:pointer;" id="Del~47792~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47792" id="display_1_47792" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47792" id="display_0_47792" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47792" id="submitter_47792">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47792" id="headerImage_47792">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Lighthouse_5D01293FFF.jpg"> <IMG src="/small/5643-Lighthouse_5D01293FFF.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Lighthouse_5D01293FFF.jpg" style="cursor:pointer;" id="Del~47793~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47793" id="display_1_47793" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47793" id="display_0_47793" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47793" id="submitter_47793">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47793" id="headerImage_47793">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<span class="dropdownb">
</tr>
</span>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Penguins1_714BCABE16.jpg"> <IMG src="/small/5643-Penguins1_714BCABE16.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Penguins1_714BCABE16.jpg" style="cursor:pointer;" id="Del~47794~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47794" id="display_1_47794" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47794" id="display_0_47794" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47794" id="submitter_47794">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47794" id="headerImage_47794">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-sameera-reddy-77a_1C7F77BE41.jpg"> <IMG src="/small/5643-sameera-reddy-77a_1C7F77BE41.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-sameera-reddy-77a_1C7F77BE41.jpg" style="cursor:pointer;" id="Del~47795~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47795" id="display_1_47795" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47795" id="display_0_47795" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47795" id="submitter_47795">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" selected="selected">cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47795" id="headerImage_47795">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<td height="30" valign="middle" class="dropdownb"><a class="zoom2" rel="group" title="Bigger Image"
href="/small/5643-Tulips_F832F5324B.jpg"> <IMG src="/small/5643-Tulips_F832F5324B.jpg" border='0'></a><br>
<a title="Delete this Image - 5643-Tulips_F832F5324B.jpg" style="cursor:pointer;" id="Del~47796~5643" class="del">[X]</a> <br>
Show Image:
Yes
<input type="radio" name="display_47796" id="display_1_47796" checked="checked" value="1" title="Check this Radio to show the image on front screen">
No
<input type="radio" name="display_47796" id="display_0_47796" value="0" title="Check this Radio to not show the image on front screen">
<br>
<br>
<select name="submitter_47796" id="submitter_47796">
<option value="none" selected="selected">(Select One)...</option>
<option value="cDM" >cDM</option>
</select>
<br>
Header Image
<select name="headerImage_47796" id="headerImage_47796">
<option value="0" selected="selected">No</option>
<option value="1" >Yes</option>
</select></td>
<input type="hidden" name="mainID" value="5643" id="mainID">
<input type="hidden" name="updmode" id="updmode" value="codes">
<tr>
<td colspan="4" align="left"><input type="button" name="Update" value="Update" class="mychecks" ></td>
</tr>
</table>
</form>
</div>
</body>
</html>
答案 0 :(得分：0)
通过AJAX提交数据后，您完全重新加载了DOM，因此您的$('.mychecks')和任何其他直接元素引用都将无用，因为您通过说$('#reloadImages').load(...)
要解决此问题，请将所有$('selector').event()替换为 $(document).on('event', 'selector', function() {...}); ，并将其与非事件相同，但使用 .find('selector') 当然不是.on('event'...etc)。
示例：
$(".mychecks").click(function(e) {
变成
$(document).on('click', '.mychecks', function(e) {
和这个
$("#frmImages").serialize();
可以是这个
$(document).find('#frmImages').serialize();
你应该将你的jQuery升级到更新的东西（至少> 1.7），以便从我在这里给你的功能获得功能。您可以使用.delegate()替换事件，但此时.on()已取代它。
我必须反对所有这些（即使它有效），因为这种方法非常草率并且可能会导致某人的浏览器在旧PC上崩溃等你需要做的是单独更新每个元素而不是基本上使用AJAX抓取整个网页，只使用JSON或其他可管理的格式获取所需的数据。 / p>
这将使您的生活更加简单，数据操作和显示对您来说非常容易。