Ajax函数第一次起作用，第二次不起作用吗? [英] Ajax function works the first time, second time it doesn't?
问题描述
所以...我正要问这个问题:我第一次使用ajax函数(编辑和删除)如何工作，但是如果我第二次运行ajax函数却没有运行，整页刷新(无论我第一次使用哪个功能，或者我第二次使用哪个功能)，第二次都不起作用?".
So... I was about to ask this question "how come my ajax functions (edit and delete) work the first time i use them, but if i run either one a second time without a full page refresh (regardless of which function i use first or which function i use second), the second time it doesn't work?".
我的意思是不起作用"，对于编辑功能，它第二次尝试像往常一样加载editUrlForm.php文件，然后停止并留下一个空的div，或者在删除的情况下，它给出我的"else"语句中的错误消息，然后留下一个空的div，在页面重新加载时，没有任何内容被删除.
By "doesn't work" i mean, for the edit function, the second time it attempts to load the editUrlForm.php file as usual, then just stops and leaves an empty div, or in the case of delete, it gives the error message from my "else" statement, then leaves an empty div, on page reload nothing has been deleted.
此问题突然因没有原因而中止了！！！
问题:为什么?如何?我不明白...
QUESTION: Why? How? I don't understand...
AJAX功能:
<script type="text/javascript">
$(function() {
$("#deleteUrl").click(function() {
$('#response').html('');
if ($('input:checkbox[name="ticked[]"]:checked').length !== 0) {
var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
.map(function() { return $(this).val() })
.get()
//alert(tickedItems)
.join(",");
$.ajax({
type: "GET",
url: "deleteUrl.php",
data: "id=" + tickedItems,
success: function(msg) {
$('#response').html();
urlRefresh();
},
error: function () {
alert('error');
}
});
}
else {
alert('Please select at least one item to delete!')
return false;
}
});
});
</script>
<script type="text/javascript">
$(function() {
$("#editUrl").click(function() {
$('#response').html('');
if ($('input:checkbox[name="ticked[]"]:checked').length == 1) {
var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
.map(function() { return $(this).val() })
.get()
.join(",");
$.ajax({
type: "GET",
url: "editUrlForm.php",
data: "id=" + tickedItems,
success: function(msg) {
$('#response').empty();
$('#content01').html(msg).show();
},
error: function () {
alert('error');
}
});
}
else {
alert('Only one item may be edited at a time. Please unselect all but one checkbox or insure you have one check box selected!')
return false;
}
});
});
</script>
p.s.我了解这可能不是堆栈溢出时的正常问题.但是我绝对为阻止该错误的发生而感到困惑……我还是一开始仍然不理解是什么导致了该错误.浏览器控制台很干净，没有任何错误，没有语法错误...如果有人对此问题有任何意见或建议，请告诉我.
p.s. I understand this probably isn't the normal sort of question on stack over flow. But I'm absolutely stumped as to whats happened to stop this error happening... I also still don't understand what was causing the error in the first place. The browser console was clean, no errors given there, no syntax errors... If anyone has any input on this issue that may shed light on this please let me know.
index.html
index.html
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Video Link Storage App</title>
<link rel="stylesheet" href="css/foundation.css">
<script src="js/vendor/custom.modernizr.js"></script>
<link rel="stylesheet" href="css/format.css">
<script src="js/ajax.js"></script>
<!-- jQuery Include -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#deleteUrl").click(function() {
$('#response').html('');
if ($('input:checkbox[name="ticked[]"]:checked').length !== 0) {
var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
.map(function() { return $(this).val() })
.get()
//alert(tickedItems)
.join(",");
$.ajax({
type: "GET",
url: "deleteUrl.php",
data: "id=" + tickedItems,
success: function(msg) {
$('#response').html();
urlRefresh();
},
error: function () {
alert('error');
}
});
}
else {
alert('Please select at least one item to delete!')
return false;
}
});
});
</script>
<script type="text/javascript">
$(function() {
$("#editUrl").click(function() {
$('#content02').html('');
if ($('input:checkbox[name="ticked[]"]:checked').length == 1) {
var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
.map(function() { return $(this).val() })
.get()
.join(",");
$.ajax({
type: "GET",
url: "editUrlForm.php",
data: "id=" + tickedItems,
success: function(msg) {
$('#response').empty();
$('#content01').html(msg).show();
},
error: function () {
alert('error');
}
});
}
else {
alert('Only one item may be edited at a time. Please unselect all but one checkbox or insure you have one check box selected!')
return false;
}
});
});
</script>
<script>
setTimeout(function() {
$('#response').fadeOut('fast');
}, 10000); // <-- time in milliseconds
</script>
</head>
<body onLoad="showUrl('All URLs')">
<div class="container">
<div class="panel" id="backgroundPanel">
<div class="row">
<div class="large-12 columns">
<div class="panel">
<center><h2 style="color: #B8BED4;">MEDIA URL STORAGE APPLICATION</h2></center>
</div> <!-- END PANEL -->
</div> <!-- END COLUMN (12) -->
</div> <!-- END ROW -->
<div class="row">
<div class="large-12 columns">
<!-- <div class="panel"> -->
<div class="small-4 columns">
<a href="#" class="small button radius expand" onClick="showAdd('addUrl');return false;">Add URL</a>
</div> <!-- END COLUMN (4) -->
<div class="small-4 columns">
<a href="#" class="small button radius expand" id="editUrl" name="editUrl">Edit URL</a>
</div> <!-- END COLUMN (4) -->
<div class="small-4 columns">
<a href="#" class="small button radius expand" id="deleteUrl" name="deleteUrl">Delete URL</a>
</div> <!-- END COLUMN (4) -->
<!-- </div> END PANEL -->
</div> <!-- END COLUMN (12) -->
</div> <!-- END ROW -->
<div class="row">
<div class=" large-2 columns">
<div class="panel">
<ul class="navigation">
<a href="#" class="small button radius expand" onClick="showUrl('All URLs');return false;"/>All URLs</a>
<a href="#" class="small button radius expand" onClick="showUrl('Television');return false;"/>T.V URLs</a>
<a href="#" class="small button radius expand" onClick="showUrl('Movie');return false;"/>Movie URLs</a>
<a href="#" class="small button radius expand" onClick="showUrl('Music');return false;"/>Music URLs</a>
</ul> <!-- END LIST -->
</div> <!-- END PANEL -->
</div> <!-- END COLUMN (2) -->
<div class="large-10 columns">
<div class="panel">
<div class="row">
<div class="large-12 columns" id="response">
</div> <!-- END COLUMN (12) -->
<div class="large-12 columns" id="content01">
</div> <!-- END COLUMN (12) -->
</div> <!-- END ROW -->
</div> <!-- END PANEL -->
</div> <!-- END COLUMN (10) -->
</div> <!-- END ROW -->
<center>© Corey Dawber, 2013</center>
</div> <!-- END PANEL -->
</div> <!-- END CONTAINER -->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<!--
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.abide.js"></script>
-->
<script>
$(document).foundation();
</script>
</body>
</html>
推荐答案
由于您可能要删除，然后在每次单击时重新添加按钮，因此您还要删除单击处理程序.您可能要尝试使用委托:
Since you are probably deleting and then re-appending the buttons on every click, you also delete the click handlers. You might want to try using delegates:
$("#response").on('click','#deleteUrl', function() {...});
和
$("#content02").on('click','#editUrl', function() {...});
说明:这会将处理程序附加到不会被覆盖的元素(#response和#content02)，但仅监听从按钮(分别为#deleteUrl和#editUrl)冒起的单击.
Explanation: This will attach a handler to the element that does not get overwritten (#response and #content02), but only listens to clicks that bubble up from the buttons (#deleteUrl and #editUrl respectively).
这篇关于Ajax函数第一次起作用，第二次不起作用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
