成功的AJAX请求打破了jQuery的功能

Question

首先，我已经阅读了几个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();
    }
  });
});

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

Answer 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