了JavaScript <code>@finish_btn = 1</code>，</p> <p><code>#process-question-submit</code>不</p> <p>注意淡出， 也不<code>#finish-test-button</code>变淡呈现偏轨

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 %> 

的问题是，后不工作：这两个按钮都在里面呈现的部分以上。

Answer 1

你试过吗？

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淡入部分内的按钮中。

Answer 2

这是因为，render a partial只是将HTML插入浏览器运行的javascript之前的视图。在这种情况下，DOM事件处理程序将变为非活动状态。

要解决这个问题，只需在document内绑定您的DOM，即使在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 %>