rails ajax生成的javascript链接不起作用答案

【问题标题】：rails ajax generated javascript link doesn't workrails ajax生成的javascript链接不起作用
【发布时间】：2013-01-12 08:08:13
【问题描述】：

这应该是一个简单的：

鉴于此链接：

<a id="description_link_146" class="document_icon pull-left" data-slug="link-to-the-blog" data-remote="true" href="/challenges/link-to-the-blog/description_line"></a>

点击时，它不显眼地执行这个 js.erb 视图，修改我们的链接以触发 javascript hideDescription() 函数：

$("#task_<%=@challenge.id%>").append("<%=j render partial: 'description_line', locals: {challenge: @challenge}%>");
$("#description_link_<%=@challenge.id%>").attr("href","javascript: hideDescription(<%=@challenge.id%>)");

这是 hideDescription 函数：

function hideDescription(id) {
    alert("hide");    
}

此链接无效。知道为什么吗？我知道在 Jquery 中，我需要在加载后重新绑定它，但这是纯 javascript。

谢谢。

【问题讨论】：

标签： javascript ruby-on-rails ajax

【解决方案1】：

据我了解，这是您的 js.erb 文件代码：

$("#task_<%=@challenge.id%>").append("<%=j render partial: 'description_line', locals: {challenge: @challenge}%>");
$("#description_link_<%=@challenge.id%>").attr("href","javascript: hideDescription(<%=@challenge.id%>)");

如果您只想在点击后隐藏链接，您可以这样做：

$("#description_link_<%=@challenge.id%>").hide();

【讨论】：

是的，这可能是一种方法，但我还有其他东西要添加到 hideDescription 函数中（比如重新定义链接）。
你可以在 js.erb 文件中做所有这些事情，否则我不明白你到底想做什么
我使用 js.erb 加载一个 div。要关闭这个 div，我想避免往返服务器，所以我更喜欢在页面上有一个 javascript。这个 javascript 应该只是删除描述并将链接重置为其原始状态。如果您有更好的方法来做到这一点，我很开放，但我认为我正在做的事情非常直截了当，错误应该很小。感谢您的帮助

【解决方案2】：

问题似乎是由于我使用了远程链接。我无法在远程 = true 的 href 中使用 javascript

即使将远程属性更改为 false 也无济于事。我想链接需要解除绑定，但我不知道该怎么做。

我最终创建了一个单独的隐藏链接并使用了 hide() 和 show() 方法：

链接：

<%= link_to "", description_line_challenge_path(challenge), class: "document_icon pull-left", id: "description_link_#{challenge.id}", data: {slug: challenge.slug}, remote: true %>
<%= link_to "", "javascript:hideDescription(#{challenge.id})", class: "document_icon pull-left", style: "display: none", id: "description_hide_link_#{challenge.id}", data: {slug: challenge.slug} %>

js.erb 显示文件：

$("#task_<%=@challenge.id%>").append("<%=j render partial: 'description_line', locals: {challenge: @challenge}%>");
$("#description_link_<%=@challenge.id%>").hide();
$("#description_hide_link_<%=@challenge.id%>").show();

javascript函数：

function hideDescription(id) {
    $("#task_description_" + id).remove();
    $("#description_link_" + id).show();
    $("#description_hide_link_" + id).hide();
}

这不是很“铁轨方式”，但我不知道更好的方式。

有人会吗？

【讨论】：