jQuery 在第一次点击时不起作用答案

【问题标题】：jQuery not works on first clickjQuery 在第一次点击时不起作用
【发布时间】：2017-11-17 13:25:06
【问题描述】：

我正在使用 Rails，我正在尝试在 ajax 中创建一个书签图标。代码有效，问题在于第一次点击请求发送但图像没有改变，下一次点击行为正常（请求发送和图像改变）。

我的看法：

<%= link_to favorite_company_job_path(@job, matching_id: candidate.id), method: :post, remote: true do %>
  <span class="favorite">
    <% if candidate.favorite %>
      <img src="<%= asset_url "favorite-activated.png" %>" alt="favorito" class="img-40" id="favorite_activated_<%= candidate.id %>">
    <% else %>
      <img src="<%= asset_url "favorite.png"%>" alt="favorito" class="img-40" id="favorite_<%= candidate.id %>">
    <% end %>
  </span>
<% end %>

我的文件 favorite.js.erb

$('#favorite_<%= @matching.id %>').on({
  'click': function(){
    $('#favorite_<%= @matching.id %>').attr('src','<%= asset_url "favorite-activated.png" %>');
    $('#favorite_<%= @matching.id %>').attr('id','favorite_activated_<%= @matching.id %>');
  }
});

$('#favorite_activated_<%= @matching.id %>').on({
  'click': function(){
    $('#favorite_activated_<%= @matching.id %>').attr('src','<%= asset_url "favorite.png" %>');
    $('#favorite_activated_<%= @matching.id %>').attr('id','favorite_<%= @matching.id %>');
  }
});

我的控制器：

def favorite
    @matching = @job.matchings.find(params[:matching_id]) 
    if @matching.favorite
      @matching.favorite = false
    else
      @matching.favorite = true
    end
    @matching.save
    respond_to do |format|
      format.html { redirect_to company_job_path(@job) }
      format.js  # <-- will render `app/views/company/jobs/favorite.js.erb`
    end
  end

有什么想法吗？

【问题讨论】：

我没有您的请求代码。你能粘贴你的完整 JS 吗？
@AntonTkachov 我添加了我的控制器代码，但对于 JS，这就是我现在最喜爱的.js.erb 中的全部内容。
首先，您的 js 响应中不需要 $(document).ready(function() {。尝试将其删除并仅使用纯 JS 代码进行响应。试一试并回答它现在是否有效？
@AntonTkachov 我删除了它，但问题仍然存在
您能否相应地更新您的问题，以便其他人更容易更新？

标签： javascript jquery ruby-on-rails ajax onclick

【解决方案1】：

我现在从您的代码中看到，在您的响应中，您只是为点击设置了侦听器，而您实际需要做的只是启动您的代码。您不需要侦听器，因为您已经在 rails 本身中设置了它们：

<%= link_to favorite_company_job_path(@job, matching_id: candidate.id), method: :post, remote: true do %>

我认为更改您的 favorite.js.erb 并设置您希望回调的部分代码：

$('#favorite_<%= @matching.id %>').attr('src','<%= asset_url "favorite-activated.png" %>');
$('#favorite_<%= @matching.id %>').attr('id','favorite_activated_<%= @matching.id %>');

$('#favorite_activated_<%= @matching.id %>').attr('src','<%= asset_url "favorite.png" %>');
$('#favorite_activated_<%= @matching.id %>').attr('id','favorite_<%= @matching.id %>');

应该适合你。希望这会有所帮助

【讨论】：

@Etienne 得到了您的评论，仔细检查了文档中的所有内容并拒绝了编辑。 jQuery 自己处理所有条件。你永远不会得到像'method called for nil/undefined'这样的东西，因为jQuery选择器总是会返回你的jQuery集合，它可以接受任何类型的动作。在优化的情况下，它也是不需要的，因为它是客户端脚本并且你有较小的 JS（没有瓶颈可能）。但是让你的代码更小更简单总是一个很好的优点

【解决方案2】：

而不是 $('#id').on('click', function(){});

使用 $(document).on('click', '#id', function(){});

希望对你有所帮助..

【讨论】：

同样的问题，行为没有改变