Question

Im making a login form for a webbased game, Styled it very pretty etc. Used Cufon to markup some text.

Now i have a submit button which is very standard. So i tried applying css and Cufon.
Not working.

Then i wrote a bit of jquery to:

1. hide the submit button
2. add a span with the same class after the submit button
3. set its text to the same as the submit button
4. add a click event to the span in which the click event of the original button is called.

Code:

$('input.button-submit').hide().after('<span class="button-submit">').next('span.button-submit').text($('.button-submit').val()).click(function(){
          $('.button-submit').prev('input.button-submit').click();
        });

This works in Chrome, Opera, firefox and safari.

Now the problem: IE (every version) doesnt show the span. It hides the original submit button, but it doesnt add the span. It looks like the .after() doesnt get properly executed. No warnings, No errors, ive debugged for about an hour now and i cant find anything on the web stating this problem.

Anyone here knows how to fix this? or an idea about the direction to search?
Any help is appreciated!

~Menno

Answer 1

Don’t forget the closing tag

.after('<span class="button-submit"></span>')