在单模式中断功能中使用Ajax渲染部分
Rendering partials with Ajax in single modal breaks functionality
我有一个简单的模态,有两个选项(登录和注册)。
模式代码:
<div class="modal fade" id="welcome" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog log-modal">
<div class="modal-content log-input">
<div class="ajax-partal-field">
<%= render partial: "reusable/login" %>
</div>
</div>
</div>
</div>
_login.html.erb
<div class="modal-header clearfix">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title pull-left">Laipni lūdzam</h4>
<%= link_to reusable_registration_path,:class=>"pull-right",:remote=>true do %>
<span>Reģistrēties</span>
<%end%>
</div>
<div class="modal-body clearfix">
<%= form_for(resource,:html => {"data-parsley-validate" => true,:class => "user-form"},:remote=> true,format: :json,as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="form-group">
<%= f.email_field :email,:class=>"user-input form-control" ,:id=>"user-name" ,:placeholder=>"Lietotājvārds *", autofocus: true ,required: true%>
<a class="help-button" href="#">?</a>
</div>
<div class="form-group">
<%= f.password_field :password,:class=>"user-input form-control", :id=>"password", :placeholder=>"Parole *", autocomplete: "off",required: true %>
<a class="help-button" href="#">?</a>
</div>
<span class="validation-message" style="color: white;">Nepareiza parole!</span>
<div class="remember-me">
<div class="squared">
<%= f.check_box :remember_me, :id=>"remember-me"%>
<label style="left: 0px;" for="remember-me"><span>Atcerēties mani</span></label>
</div>
</div>
<%= button_tag "PIESLĒGTIES", data: { disable_with: "Strādā..." } ,:class=>"blue-button btn btn-default" %>
<%= link_to reusable_password_recovery_path,:remote=> true, :class => "pull-right forgot-pass" do %>
<span>Aizmirsāt paroli</span>
<% end %>
<%end%>
</div>
当用户触发登录模态时,他可以选择将模态内容更改为注册表。如果用户触发注册模态,他可以切换到登录。他可以连续更改。
控制器:
def login
respond_to do |format|
format.js
end
end
def registration
respond_to do |format|
format.js
end
end
我有合适的js文件,比如login.js.erb
$(".ajax-partal-field").html("<%= escape_javascript(render('login')) %>");
问题:
当我第一次触发登录模式时,一切都正常。当我点击注册表单时,表单将失去javascript功能。例如
使用ajax加载部分后,我无法单击复选框。
<%= f.check_box :remember_me, :id=>"remember-me"%>
<label style="left: 0px;" for="remember-me"><span>Atcerēties mani</span></label>
如您所知,在替换javascript所依赖的html元素时,您将丢失处理程序。
要修复这些错误,请将javasacript处理程序附加到一个不会被替换的元素上。例如:
$('body').on('click', '.class-of-elem-that-will-get-swapped-out', function() {
console.log("this will work")
})
而不是:
$('.class-of-elem-that-will-get-swapped-out').click(function() {
console.log("this will never print after the html gets swapped out")
})
相关文章:
- 无法在通过jQuery的ajax加载的页面中执行javascript
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在php文件中获取$.post-ajax传递的值
- Replacing $ .ajax?
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- Ajax发布表单序列化,发布引号'
- 通过Ajax将JavaScript函数传递给PHP文件
- ajax请求的顺序总是不同的
- 可以't使用Polymer's的核心ajax
- Ajax Live搜索发布到Laravel视图
- Ajax聊天消息重复而不仅仅是更新
- 从控制器返回后Ajax启动事件激发
- PHP AJAX图片上传示例不上传
- 从ajax请求中获取javascript对象
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 如何在Javascript中解析AJAX数组的特定部分
- Ajax文件加载和<输入>文件加载
- Javascript/jQuery中的并行Ajax调用
- Ajax-如何获取数据
- 在函数体内部使用ajax时,Javascript函数未定义错误