渲染部分Rails后Javascript無法正常工作

Question

<% if @questions_counter == 2 %>
  <% if @finish_btn == 0 %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
  <% else %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
    $("#process-question-submit").fadeOut();
    $("#finish-test-button").fadeIn();
  <% end %>

問題是，當@finish_btn = 1 ，

#process-question-submit不會消失， #finish-test-button也不會淡入

注意：兩個按鈕都在上方的渲染部分內。

Answer 1

這是因為render partial只是在瀏覽器運行javascript之前在視圖中插入HTML。 在這種情況下， DOM事件處理程序將變為非活動狀態。

要解決此問題，只需將您的DOM綁定到document內，即使ajax調用后，它也可使處理程序保持活動狀態。

<% if @questions_counter == 2 %>
  <% if @finish_btn == 0 %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();
  <% else %>
    $("#initial-question-frame").fadeOut('fast');
    $("#next-question-frame").html("<%= escape_javascript(render(:partial => "question", :locals => {:question => @question})) %>").fadeIn();

    $(document).ready(function() {
      $("#process-question-submit").fadeOut();
      $("#finish-test-button").fadeIn();
    });
  <% end %>
<% end %>

Answer 2

你有嘗試過嗎？

var _question = "<%= j render(:partial => 'question', :locals => {:question => @question}) %>";
$('#next-question-frame').empty();
$('#next-question-frame').append(_question);
$("#process-question-submit").fadeOut();
$("#finish-test-button").fadeIn();

您的Javascript應該可以正常工作，因此部分腳本可能無法正確呈現。 如果這不起作用，您可以嘗試通過僅使用#finish-test-button {display: block;}首先#finish-test-button {display: block;}來確保其顯示出來，從而進行故障排除。

如果這些都不起作用，請嘗試將Javascript淡入部分的按鈕中。