Question

我有一个基本的切换功能，当最初点击项目时它发送一个ajax帖子，当第二次点击时它发送第二个不同的ajax帖子。

问题是，一旦它进行了ajax调用，第二个切换功能就不再触发了。

当我从切换中删除了ajax函数并用基本的show / hide div替换它们时，它可以很好地进行第一次和第二次点击。

以下是我的代码：

为了测试目的，您会注意到我有第一次点击的基本显示/隐藏功能。使用此代码，第一次单击工作，第二次单击工作并进行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)}
    })





  });

对此的任何帮助将非常感谢。非常感谢

Answer 1

如果包含被单击元素的页面部分被AJAX结果替换，则处理程序将丢失。你可以这样做：

$(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;
  });
});

设置一个“click”处理程序并显式跟踪切换状态，但它使得处理程序在事件发生时起作用<body>（您可以将处理程序放在更接近的容器中）在DOM中，如果你想）。因此，即使您替换页面片段，只要新片段在表头上具有“id”值，委派的事件处理程序将“看到”它。

编辑 - 我稍微改变了一下，表明这应该在“ready”处理程序中完成，或者以某种其他方式完成，以便DOM中存在<body>元素。如果代码是在<script>中的<head>块中运行而未设置为“就绪”或“加载”处理程序，那么<body>将不会出现在此处什么都不做。

再次编辑 - Here是一个伪造的演示版。我上面的代码中有一个很大的（缺少“}”）“我已经修复了那个小提琴，我也会在这里解决。

Answer 2

我原本以为使用jquery.live（）会是一个很好的解决方案，就像这里看到的答案： Using jQuery .live with toggle event

Ajax调用打破了Jquery切换功能

2 个答案: