Rails UJS（jQuery）未连接数据远程链接

Rails版本：3.2.1

Ruby版本：1.9.3p125

浏览器：Chrome 18.0.1025.162

开发操作系统：Mac OS/X Lion

服务器操作系统：CentOS 5

我试图在我的link_调用中使用：remote，这样我就可以使用AJAX请求HTML内容，并用返回的内容填充页面的一部分

Rails似乎没有正确地连接链接。浏览器只是将链接视为常规链接标记，并且似乎没有处理任何Rails UJS单击事件处理程序

我有一个与数据确认相关联的链接，该链接正在运行，因此这表明UJS至少正在进行一些必要的连接

我将其他单击事件侦听器附加到同一链接，以隐藏/显示页面的一部分，该部分将显示AJAX调用返回的HTML

抱歉，如果这是张贴在其他地方，但我已经搜索了几天，现在还没有找到解决这个具体问题的解决方案。我看过一些相关的文章，但它们都假设正在进行AJAX调用，并且存在一些Rails渲染流或路由问题，在我的例子中，似乎根本没有任何连线

下面是一些代码：

视图中的我的链接：

<%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>

最后，我在index.js.erb文件中的代码：

<% if (!@project.nil?) %>
    $('#project-<%=@project.id%>-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% else %>
    $('#project-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% end %>

$（“#项目--任务”）.html（“”）；
$（“#项目任务”）.html（“”）；

您的

rails.js

是否包含在application.js/application.coffee javascript资产打包程序中？如果不做的话。否则，您必须自己用javascript/coffee脚本编写事件处理程序

这段代码看起来也有点脏。您的index.js.erb代码应该至少包装成$（document.ready）（function（）{/HERE/}）

您的索引操作在notes控制器i中执行、显示、搜索和筛选。比我预期的还要多：）

关于rails 3.2中的ajax/远程功能

---

好吧，我想出来了

正在检查此HTML的相关：远程链接：

<div class="list-item-row">
<div class="list-item-expander action-icon">
  <a href="#" title="Show/hide content pane">
    <%= image_tag "icons/24x24/plus.png", :class => "expander-image closed" %>
    <%= image_tag "icons/24x24/minus.png", :class => "expander-image opened" %>
  </a>
</div><div class="action-icon">
  <a href="#" data-section="task-description" class="section-link" title="Show details"><%= image_tag "icons/24x24/page.png" %></a>
</div><div class="action-icon">
  <%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>
</div><div class="action-icon">
  <%=task_image_tag(task, 24)%>
</div><div class="action-icon">
  <div class="task-priority task-priority-<%=task.priority_str.downcase%>" title="<%=task.priority_str%> Priority"></div>
</div><div class="action-icon">
  <% unless (task.assigned_developer.nil?) %><%= link_to image_tag(task.assigned_developer.avatar.icon.url), developer_path(task.assigned_developer), :title => "Assigned to: " + task.assigned_developer.full_name %><%end%>
</div><div style="width:280px;">
  <%=link_to truncate(task.name, :length => 40, :omission => "..."), task_path(task), :title => task.name, :class => "item-show-link" %>
</div><div style="width:300px;font-size:10px;color:#777;">
  <%=truncate(task.description, :length => 50, :omission => "...")%>
</div><div style="width:90px;float:right;text-align:center;">
  <%=task.status_str%>
</div></div>

显然，evt.stopPropation（）不允许：remote链接的click事件在事件链中冒泡到足够高的位置，由UJS处理。我通过过滤掉与：remote链接相关的src元素修复了这个问题。代码如下：

elem.find(".list-item .list-item-row").click(function(evt) {
    if ($(evt.srcElement).not('a').not('img').size() > 0) {
        evt.stopPropagation();
        $.tf.listItem.showHideItem($(this));
    }
});

---

通过过滤SRC元素，Img/A点击可以冒泡出现。

感谢您的评论。然而，我发现有文档表明我需要删除3.2中的rails.js，因为它全部由资产管道处理。以下是文档：试图根据那里的说明构建ujs文件，这表明我不需要rails.js，因为所有必需的文件都已准备就绪。我仍在寻找答案，但还没有找到任何结果。

<div class="list-item-row">
<div class="list-item-expander action-icon">
  <a href="#" title="Show/hide content pane">
    <%= image_tag "icons/24x24/plus.png", :class => "expander-image closed" %>
    <%= image_tag "icons/24x24/minus.png", :class => "expander-image opened" %>
  </a>
</div><div class="action-icon">
  <a href="#" data-section="task-description" class="section-link" title="Show details"><%= image_tag "icons/24x24/page.png" %></a>
</div><div class="action-icon">
  <%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>
</div><div class="action-icon">
  <%=task_image_tag(task, 24)%>
</div><div class="action-icon">
  <div class="task-priority task-priority-<%=task.priority_str.downcase%>" title="<%=task.priority_str%> Priority"></div>
</div><div class="action-icon">
  <% unless (task.assigned_developer.nil?) %><%= link_to image_tag(task.assigned_developer.avatar.icon.url), developer_path(task.assigned_developer), :title => "Assigned to: " + task.assigned_developer.full_name %><%end%>
</div><div style="width:280px;">
  <%=link_to truncate(task.name, :length => 40, :omission => "..."), task_path(task), :title => task.name, :class => "item-show-link" %>
</div><div style="width:300px;font-size:10px;color:#777;">
  <%=truncate(task.description, :length => 50, :omission => "...")%>
</div><div style="width:90px;float:right;text-align:center;">
  <%=task.status_str%>
</div></div>

elem.find(".list-item .list-item-row").click(function(evt) {
    evt.stopPropagation();
    $.tf.listItem.showHideItem($(this));
});

elem.find(".list-item .list-item-row").click(function(evt) {
    if ($(evt.srcElement).not('a').not('img').size() > 0) {
        evt.stopPropagation();
        $.tf.listItem.showHideItem($(this));
    }
});