【问题标题】：Successful AJAX request breaks jQuery funtion [duplicate]成功的 AJAX 请求会破坏 jQuery 函数 [重复]
【发布时间】：2016-01-28 00:05:46
【问题描述】：

首先，我在几个 stackoverflow 帖子和文章中阅读了有关事件委托的内容，例如：Understanding Event Delegation，这是有道理的，只是在这种情况下不起作用。我正在开发 Rails 3 应用程序。我有一个使用 simple_nested_form gem 的嵌套表单，它通过 ajax 提交一条新记录，并在成功后呈现包含新记录的部分内容和 #show 模板上的表单。设计要求：用户到达页面，可以看到记录（如果有的话）和Enter/Edit Timecard的按钮。该按钮将在显示记录或表单之间切换，但不能同时显示两者。这工作正常。用户单击按钮，显示表单，然后添加、更新或删除记录。他们点击提交，ajax 更新页面，但现在Enter/Edit Timecard 按钮不再起作用。为简洁起见，对以下内容进行了编辑。

显示模板中渲染的部分

<div id="update-timecard-area">
  <div id="timecard-partial">
    <%= render partial: 'timecards'%>
  </div>
</div>

部分内容

<div id="timecard-display-area">
 # Display records
</div>

<div id="timecard-form-area" >
  # The from
</div>

<div>    
  # Link that when clicked either displays the form or the records but not both
  <a href="#" id="toggle-timecard-form" class='btn btn-default btn-sm'>Enter/Edit Timecard</a>
</div>

在初始页面加载时隐藏表单的相关 SCSS

#update-timecard-area {
  #timecard-form-area {
    display: none;
  }
}

隐藏/显示部分表单的功能

$( document ).ready(function($) {
  $("#timecard-partial").on( "click", "a#toggle-timecard-form", function(e) {
    e.preventDefault();

    if ($("#timecard-display-area").is(":visible")){
        $("#timecard-display-area").hide();
        $("#timecard-form-area").show();
    }
    else if ($("#timecard-form-area").is(":visible")) {
        $("#timecard-display-area").show();
        $("#timecard-form-area").hide();
    }
  });
});

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

这是因为您正在对那些特定元素执行事件绑定，并且当您重新渲染部分元素时，这些元素会被替换。

我建议将所有绑定代码封装到一个函数中，然后在部分渲染后调用它。

例如：

function setup($) {
    $("#timecard-partial").on( "click", "a#toggle-timecard-form", function(e) {
        e.preventDefault();

        if ($("#timecard-display-area").is(":visible")){
            $("#timecard-display-area").hide();
            $("#timecard-form-area").show();
        }
        else if ($("#timecard-form-area").is(":visible")) {
            $("#timecard-display-area").show();
            $("#timecard-form-area").hide();
        }
    });
}

$( document ).ready(setup);

然后你可以在局部渲染时调用setup()。

【讨论】：

如何判断部分是否已渲染？我尝试过this 之类的方法，但没有运气。

【解决方案2】：

我怀疑在表单提交后你在搞乱#timecard-partial。你可以试试这个：

$( document ).ready(function($) {
  $("body").on( "click", "a#toggle-timecard-form", function(e) {
    e.preventDefault();

    if ($("#timecard-display-area").is(":visible")){
        $("#timecard-display-area").hide();
        $("#timecard-form-area").show();
    }
    else if ($("#timecard-form-area").is(":visible")) {
        $("#timecard-display-area").show();
        $("#timecard-form-area").hide();
    }
  });
});

这里我们绑定的是body，而不是#timecard-partial

【讨论】：

我试过了，不幸的是没有用。