从 Rails link_to调用 jQuery 函数

Call jQuery function from Rails link_to

本文关键字：调用 jQuery 函数 to Rails link      更新时间：2023-09-26

我有一个 ruby 循环，可以创建一个注释列表。

我想知道在这种情况下是否可以将jQuery函数附加到Rails link_to助手？ 

    <% @video.phrases.each do |phrase| %> 
    <div class = "span4" id ="comment" ><%= phrase.content %></div><a id ="ff"  ><%= image_tag("ff.png", :size=> "32x32" )%></a>
    <% end %>

我希望类似的东西

    <% @video.phrases.each do |phrase| %> 
    <div class = "span4" id ="comment" ><%= phrase.content %></div><%= link_to (image_tag("ff.png", :size=> "32x32" ), html => {<script>$("#video_div").html('CONTENTS OF HTML');</script>} :remote => true %>
    <% end %>

我知道它不起作用，但我想知道有没有一种简单的方法可以实现这种功能？

谢谢！

您可以通过两种方式执行此操作。

第一个是在link_to上添加一个 html 属性：

<% @video.phrases.each do |phrase| %> 
  <div class = "span4" id ="comment" >
    <%= phrase.content %>
  </div>
  <%= link_to (image_tag("ff.png", :size=> "32x32" ), html => {:onclick => "$('#video_div').html('CONTENTS OF HTML');"} :remote => true %>
<% end %>

第二种是将Javascript与Ruby分开：

<% @video.phrases.each do |phrase| %> 
  <div class = "span4" id ="comment" >
    <%= phrase.content %>
  </div>
  <%= link_to (image_tag("ff.png", :size=> "32x32" ) :remote => true %>
<% end %>
<script type="text/javascript">
  $('a').click(function(){
    $("#video_div").html('CONTENTS OF HTML');
  );
</script>

如果需要链接标记的内容，请将'CONTENTS OF HTML'替换为$(this).html()

此外，

我实际上发现了Rails link_to_function助手，并且能够通过以下方式实现所需的行为：

<% @video.phrases.each do |phrase| %> 
 <div class = "span4" id ="comment" ><%= phrase.content %></div><a id ="ff">
  <%= link_to_function image_tag("ff.png", :size=> "32x32" ), "use_comment('#{phrase.comment}')"%>
 </a>

您可能希望使用事件委派，因为您似乎要创建大量注释。

因此，从赠款借用类似的东西：

<% @video.phrases.each do |phrase| %> 
  <div class = "span4" id ="comment" >
    <%= phrase.content %>
  </div>
  <%= link_to (image_tag("ff.png", :size=> "32x32" ) :remote => true %>
<% end %>

<script type="text/javascript">
  $("#comment-wrapper-name-here").on("click", "a", function() {
    $("#video_div").html('CONTENTS OF HTML');
  );
</script>
相关文章：