jquery click not getting triggered on IE

Question

I've seen a lot of posts on this issue but none of the solutions worked. The following..

<script type="text/javascript">

$(document).ready(function() {
  $("a.login_linkedinbutton").click(function(){
    $("#signup-form").submit();
    return false;
  });
});

</script>

is what I have in the body tag of a page. Also in the body is the form, the html of which in IE shows up like this..

<form accept-charset="UTF-8" action="/auth/linkedin" class="well form-inline" id="signup-form" method="post">
  <a class="login_linkedinbutton" href="#">Login using Linkedin</a>
</form>  

in IE8, when the link within the form is clicked, the jquery is not getting triggered. It's working in Chrome and Firefox. I've tried:

1) Using the live event to bind the click action 2) Moved the jquery out of the page and into rails assets

Any ideas what else to try?

Answer 1

Use <input type="submit" value="Login using Linkedin"> Why create problems by using a non-standard element and then trying to recover from it?

If you want it to LOOK like a link, just style the button. But why do it? It's poor user experience to suggest the user to go to another page while they're submitting a form. Most users avoid clicking links when they have a form filled because they're afraid of loosing what they just typed.

If you insist using the link, you could try this:

var onLinkedInLogin = function(e){
    e.preventDefault(); // stops the link processing
    $("#signup-form").submit();
    // add return false; if you want to stop event propagation also
    // equivalent to calling both, e.preventDefault() and e.stopPropagation().
};

$(document).on('click', 'a.login_linkedinbutton', onLinkedInLogin);

The reason I'm suggesting using .on() instead on .click() is that I guess that on IE, the a.login_linkedinbutton is not present in the DOM when you call the .click() .