Ajax调用中断了Jquery切换功能
[英]Ajax call is breaking Jquery toggle function
问题描述
I have a basic toggle function, when item is clicked initially it sends an ajax post, and when clicked the second time it sends a second different ajax post. 
我有一个基本的切换功能，当最初单击项目时，它将发送一个ajax帖子，而第二次单击时，它将发送另一个不同的ajax帖子。
the issue is once it makes the ajax call, the second toggle function no longer fires. 问题是一旦它发出了ajax调用，第二个切换功能将不再触发。
When I removed the ajax functions from the toggle and replaced them with a basic show/hide div, it worked just fine first and second click. 当我从切换中删除ajax函数并将其替换为基本的show / hide div时，第一次单击和第二次单击都可以正常工作。
Below is my code: 下面是我的代码：
You will notice I have a basic show/hide function for the first click, for testing purposes. 您会注意到，为了进行测试，首次点击时我具有基本的显示/隐藏功能。 Using this code the first click works, second click works and make the ajax call, but any clicks after dont do anything. 使用此代码，第一次点击有效，第二次点击有效并进行ajax调用，但是之后的任何点击都不会执行任何操作。
//Sort by Instrument ACS or DESC
$("th#seeking").toggle(function()
{ // first click update sorting order
$("a.add_listing").hide(200);
$("a.add_listing").show(200);
},
function()
{ // On second Click toggle opposite sorting order
$.ajax({
type: "POST",
url: "ajax_calls.php",
data: "order=instrument_asc&sort_item=true",
success: function(r){$("#listings").html(r);},
error: function(){alert(2);$("#error").text("Could not retrieve posts").fadeIn(300).delay(900).fadeOut(300)}
})
});
Any help on this would be very much appreciated. 任何帮助，将不胜感激。 Many thanks 非常感谢
2 个解决方案
解决方案1
0 已采纳 2011-03-28 15:17:50
If the portion of the page containing the element that's clicked is replaced by the AJAX results, then the handler will be lost. 如果页面中包含被单击元素的部分被AJAX结果替换，则处理程序将丢失。 You could do something like this instead: 您可以改为执行以下操作：
$(function() {
var toggleState = 0;
$('body').delegate('th#seeking', 'click', function() {
if (toggleState === 0) {
$("a.add_listing").hide(200);
$("a.add_listing").show(200);
}
else {
$.ajax({
type: "POST",
url: "ajax_calls.php",
data: "order=instrument_asc&sort_item=true",
success: function(r){$("#listings").html(r);},
error: function(){
alert(2);
$("#error").text("Could not retrieve posts")
.fadeIn(300).delay(900).fadeOut(300)
}
});
}
toggleState = toggleState ^ 1;
});
});
That sets up a "click" handler and keeps track of the toggle state explicitly, but it makes the handler work on the event as it bubbles up to the <body> (you could put the handler at a closer container in the DOM if you wanted to). 这会设置一个“单击”处理程序，并显式跟踪切换状态，但是它会使处理程序处理事件，因为它会一直气泡到<body> （如果您将处理程序放置在DOM中较近的容器中，则可以想要）。 Thus even if you replace the page fragment, as long as the new fragment has that "id" value on the table header, the delegated event handler will "see" it. 因此，即使您替换页面片段，只要新片段在表头上具有该“ id”值，委托事件处理程序也将“看到”它。
edit — I changed that slightly to indicate that this should be done in a "ready" handler, or in some other way such that the <body> element exists in the DOM. 编辑 -我稍作更改，以指示应在“就绪”处理程序中完成此操作，或以其他方式使DOM中存在<body>元素。 If the code were to run in a <script> block in the <head> without being set up as a "ready" or "load" handler, then the <body> won't be there and it won't do anything. 如果代码在<head>的<script>块中运行而没有被设置为“就绪”或“加载”处理程序，则<body>将不会在那里并且不会做任何事情。
edit again — Here is a faked-up demo. 再次编辑 — 这是一个伪造的演示。 There was a big in my code above (missing "})" towards the end) that I've fixed in that fiddle, and that I'll fix here too. 我在上面的代码中有一个很大的地方（结尾处缺少“}”），我已经在小提琴中修复了这个问题，我也将在此处修复它。
解决方案2
0 2011-03-28 15:40:41
我本以为使用jquery.live（）将是一个很好的解决方案，例如在这里看到的答案： 将jQuery .live与toggle事件一起使用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.