Question

我有一个rails页面show，有两个标签，项目和成员。单击其中一个选项卡时，将通过AJAX呈现相应的部分。这一切都很有效，除了当我通过ajax呈现这些页面时，javascript函数似乎不适用于呈现的内容。

例如，在“成员”选项卡中，我有一个“添加用户”链接，单击该链接时，应将某些div上的CSS显示属性从无更改为阻止。然而，这不起作用。任何帮助将不胜感激！

show.html.erb

<div id="collective_tabs">
  <%= link_to 'Projects', collective_projects_path(@collective), remote: true %>
  <%= link_to 'Members', collective_members_path(@collective), remote: true %>
</div>
<div id="collective_content">
    <%= render 'projects' %>
</div>

members.js.erb

$('#collective_content').html("<%= escape_javascript(render 'members') %>");

_members.html.erb

<div id="collective_members">
    <div id="add_user"><%= link_to '(Add User)', '#' %></div>
    <div class="popup" id="pop_up_form">
        <div id="user_search_form">
            <%= render 'shared/user_search_form' %>
        </div>
        <div id="close_window"><%= link_to 'x', '#' %></div>
    </div>
    <div class="black_overlay" id="fade_overlay"></div>
</div>

CSS

.black_overlay {
    display: none;
}
.popup {
    display: none;
}

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require chosen-jquery
//= require messages
//= require bootstrap
//= require turbolinks
//= require_tree .

$(document).ready(function() {
    $('#add_user').click(function (event) {
      document.getElementById('pop_up_form').style.display='block'
      document.getElementById('fade_overlay').style.display='block'
      event.preventDefault(); // Prevent link from following its href
    });

    $('#close_window').click(function (event) {
      document.getElementById('pop_up_form').style.display='none'
      document.getElementById('fade_overlay').style.display='none'
      event.preventDefault(); // Prevent link from following its href
    });
});

Javascript打破Ajax页面渲染

0 个答案: