javascript - 成功的 AJAX 请求破坏了 jQuery 函数

Question

首先，我在一些 stackoverflow 帖子和文章中读到了有关事件委托(delegate)的内容: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();
    }
  });
});

Answer 1

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

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

例如:

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()。