Ajax 调用破坏了 Jquery 切换功能 [英] Ajax call is breaking Jquery toggle function
问题描述
我有一个基本的切换功能，当项目最初被点击时它会发送一个 ajax 帖子，当第二次点击时它会发送第二个不同的 ajax 帖子.
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，第二个切换函数就不再触发.
the issue is once it makes the ajax call, the second toggle function no longer fires.
当我从切换中删除 ajax 函数并用基本的显示/隐藏 div 替换它们时，第一次和第二次点击效果很好.
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 调用，但之后的任何点击都不执行任何操作.
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.
//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
推荐答案
如果包含被单击元素的页面部分被 AJAX 结果替换，则处理程序将丢失.你可以这样做:
If the portion of the page containing the element that's clicked is replaced by the AJAX results, then the handler will be lost. 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;
});
});
这会设置一个点击"处理程序并明确跟踪切换状态，但它使处理程序处理事件，因为它冒泡到 (你可以把如果您愿意，可以将处理程序放在 DOM 中更近的容器中).因此，即使您替换页面片段，只要新片段在表头上具有该id"值，委托的事件处理程序就会看到"它.
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). 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.
编辑 —我稍微改变了一下，表明这应该在就绪"处理程序中完成，或者以其他方式完成，以便 元素存在于 DOM 中.如果代码在 中的
