在单模式中断功能中使用Ajax渲染部分

Rendering partials with Ajax in single modal breaks functionality

本文关键字:Ajax 染部 功能 单模式 模式 中断      更新时间:2023-09-26

我有一个简单的模态,有两个选项(登录和注册)。

模式代码:

<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">&times;</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")
})