Rails and JQuery - can't disable a links default action.

Question

I have a "checked" link which goes off to the same names controller action. Its routed as a POST request. Ive setup up the code but whats happening is the jquery $.post fires as wanted but the html request also happens meaning my action is being called twice. I can't figure out why. Can anyone spot a mistake im making?

In my application.js

jQuery.ajaxSetup({
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

$(document).ready(function() {
 $('ul li.sentence_summary a.correct').click(function(){
      $(this).css("border", "1px black solid");
      $.post($(this).attr("href"), null, null, "script");
      return false;
    });

});

in my controller

 def check
    @sentence_author = User.find(params[:user_id])
    @sentence = @sentence_author.sentences.find(params[:id])
    @sentence.checked_at = Time.now
    @sentence.checker_id = current_user.id
    respond_to do |format|
      if @sentence.save!
        flash[:notice] = "Thank you for checking #{@sentence_author.to_s}s sentence."
        format.js {  }
        format.html { redirect_to user_foreign_sentences_path(current_user, :display => :pending) }
        format.xml  { head :ok }
      end
    end
  end

and in the actions js file

alert("testing123");

UPDATE

my view renders a collection of sentences with this partial. The partial in turn calls a view helper method shown below to render the links

%li{:id => ["sentence", "#{sentence.id}"], :class => "sentence_summary bottom_border_light"}
  %div.left
    = thumbnail_link_to_user_profile(sentence.user, User::GRAVATAR_M)
  %div.left.main_info_container
    %div
      = link_to_user_profile(sentence.user)
      = t('sentences.table.wrote')
    %div.main_focus

      = sentence.text
    %div.bottom_bar
      %div.left
        = created_at_linked_to_sentence_show_path(sentence)
      %div.right.rollover_options
        = render_check_options(sentence)
        = render_edit_options(sentence)
        = render_flag(sentence)
      %div.clear
  %div.clear

and this helper renders the link in question

  def render_check_options( sentence)
    if sentence.user != current_user and sentence.language == current_user.native_language and sentence.pending?
      html = link_to("correct", check_user_sentence_path(sentence.user, sentence), :method => "post", :class => "action_options underline_on_hover always_blue correct")
      html += link_to("incorrect", new_sentence_correction_path(sentence), :class => "action_options underline_on_hover always_blue incorrect")
      return html
    end
  end

UPDATE 2* as per tonys advice heres what happens in my firebug console

console.debug($('ul li.sentence_summary a.correct'));

outputs as expected the correct links (i click on these and they go to the right html)

[a.action_options /users/9...24/check, a.action_options  /users/2...26/check, a.action_options /users/2...27/check, a.action_options  /users/9...28/check, a.action_options /users/1.../8/check, a.action_options  /users/2...10/check, a.action_options /users/1...11/check, a.action_options  /users/9...12/check]

but even after running the following two commands the links are not disabled

   $('ul li.sentence_summary a.correct').unbind('click');


    $('ul li.sentence_summary a.correct').click(function(){
          return false;
        });  

my html looks like this for the first li in the ul (note the links in question are hidden unless rollovered hence whey there display is set to :hidden here.)

        <div class="left">
          <a href="/users/9"><img alt="D03e17968fe80cd2d3816e86a7e072f9" class="avatar" src="http://gravatar.com/avatar/d03e17968fe80cd2d3816e86a7e072f9.png?d=identicon&amp;amp;r=PG&amp;amp;s=45"&gt;&lt;/a&gt;
        </div>
        <div class="left main_info_container">
          <div>
            <a href="/users/9" class="user_name_link underline_on_hover always_blue">maxwell.wiegand</a>
            wrote
          </div>
          <div class="main_focus">
            Aspernatur eum tenetur dolorem impedit dolor modi illum.
          </div>
          <div class="bottom_bar">
            <div class="left">
              <a href="/users/9/sentences/24" class="meta-data underline_on_hover">2 days ago</a>
            </div>
            <div style="display: none;" class="right rollover_options">
              <a href="/users/9/sentences/24/check" class="action_options underline_on_hover always_blue correct" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'post'); f.appendChild(m);var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'ZD3boP6x3HjxzvLBQmTsJT2xCWGQoq8j7M0ZSD6UGbE='); f.appendChild(s);f.submit();return false;">correct</a><a href="/sentences/24/corrections/new" class="action_options underline_on_hover always_blue incorrect">incorrect</a>

              <a href="/sentences/24/flags/new" class="action_options underline_on_hover always_blue">flag</a>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="clear"></div>

Answer 1

Try removing

$(this).css("border", "1px black solid");
      $.post($(this).attr("href"), null, null, "script");

just return false and tell me what happens

update

If you set a link's onclick to return false, it should go nowhere. I would check two things -

1) Make sure the selector is correct: what is the output when you do this?

console.debug($('ul li.sentence_summary a.correct'));

2) Make sure no other click handlers are interfering: After you have checked #1, open up your JS console and do:

$('ul li.sentence_summary a.correct').unbind('click');

This will unbind all click events including the one you want to occur. Then rebind the click event by executing your usual code in the console (only return false in the click handler). This will ensure that there is only one handler listening to your links' click event and that one handler will return false and not execute the link.

3) Post the generated HTML in question so we can take a look

Answer 2

html = link_to("correct", check_user_sentence_path(sentence.user, sentence), :method => "post", :class => "action_options underline_on_hover always_blue correct")

The :method => "post" is likely the source of your problems here. That tells Rails to build a form for submission, meaning that your return false; isn't doing what you think it's doing.

Answer 3

I would try this:

   $('ul li.sentence_summary a.correct').click(function(e){
      e.preventDefault();
      $(this).css("border", "1px black solid");
      $.post($(this).attr("href"), null, null, "script");
    });