Question

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

我的观点：

<%= 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

有什么想法吗？

Answer 1

我现在从您的代码中看到的是，在您的回复中，您只需设置侦听器以进行单击，而您实际需要做的只是启动您的代码。你不需要听众，因为你已经在轨道中设置了它们：

<%= 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 %>');

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

Answer 2

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

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

希望这可以帮助你..

jQuery首次点击时无效

2 个答案: