[英]Javascript not working after rendering partial rails
<% 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 %>
The problem is, when @finish_btn = 1
, 问题是,当
@finish_btn = 1
,
#process-question-submit
is not fading out, nor the #finish-test-button
fades in #process-question-submit
不会消失, #finish-test-button
也不会淡入
Note: that both buttons are inside the rendered partial above. 注意:两个按钮都在上方的渲染部分内。
This is because, render
a partial
just insert the HTML to the view before javascript
run by the browser. 这是因为
render
partial
只是在浏览器运行javascript
之前在视图中插入HTML。 In that case, DOM
event handler goes to inactive. 在这种情况下,
DOM
事件处理程序将变为非活动状态。
To resolved this, just bind your DOM
inside the document
and it will keep your handler still active even after ajax
call. 要解决此问题,只需将您的
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 %>
Have you tried this? 你有尝试过吗?
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();
Your Javascript should work, so it seems the partial might not be rendering properly. 您的Javascript应该可以正常工作,因此部分脚本可能无法正确呈现。 If this doesn't work, you might try troubleshooting by just getting the partial to show first with
#finish-test-button {display: block;}
to make sure it's showing up. 如果这不起作用,您可以尝试通过仅使用
#finish-test-button {display: block;}
首先#finish-test-button {display: block;}
来确保其显示出来,从而进行故障排除。
If none of that works, try putting the Javascript to fade in the button inside the partial. 如果这些都不起作用,请尝试将Javascript淡入部分的按钮中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.