成功的AJAX請求中斷jQuery功能

Question

首先，我已閱讀了幾個stackoverflow帖子和文章中的事件代理，如下所示：Understanding Event Delegation，它有道理，它只是在這種情況下不起作用。我正在研究Rails 3應用程序。我有一個使用simple_nested_form gem的嵌套表單，它通過ajax提交一條新記錄，一旦成功，就會在#show模板上呈現包含新記錄和表單的部分。設計要求：用戶到達頁面並可以看到記錄（如果有的話）和按鈕Enter/Edit Timecard。該按鈕將在顯示記錄或表單之間切換，但不能同時顯示。這工作正常。用戶單擊該按鈕，隨窗體一起呈現，然後添加，更新或刪除記錄。他們點擊提交，阿賈克斯更新頁面，但現在Enter/Edit Timecard按鈕不再有效。爲簡潔起見，編輯以下內容。

在展示模板呈現

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

隱藏表單上初始頁面加載

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

函數隱藏部分

<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的內容物的部分/顯示部分形式

$(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