渲染部分导轨后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 只是将 HTML 插入到浏览器运行的 javascript 之前的视图中。在这种情况下，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;} 先显示部分来尝试进行故障排除，以确保它显示出来。

如果这些都不起作用，请尝试将 Javascript 淡入到部分内的按钮中。