Question

我有一个简单的模态，有2个选项（登录和注册）。

模态代码：

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

Answer 1

如您所知，当您替换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")
})

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

1 个答案: