How can I make this jQuery work in IE explorer?

Working with the following code to dynamically change the submit buttons to image based buttons.

marker2 = jQuery('<span class="marker"> </span>').insertBefore('input#ResetDatesButton');
jQuery('input#ResetDatesButton').detach().attr('type', 'image').attr('src',theme_folder+'/style/images/ResetDatesButton.png').in开发者_如何学JAVAsertAfter(marker2);
marker2.remove();

This works beautifully in FF, Chrome and Safari but fails totally in IE6, 7 and 8. Then button is removed, but not replaced. How can I achieve the same result in IE?

IE doesn't allow you to dynamically change the type attribute of form inputs. The only option you have is to delete the element and replace it with a new one of the correct type,

Internet Explorer doens't allow input[type] changes on the fly. Here is another thread discussing it: change type of input field with jQuery

Then, jQuery can do nothing to it works.

You will to:

• Use CSS on your input[type=button] to show the image you want and hide the text.
• Or hide the input, put an a tag with the image you want and set the click() to call the input.click().

EDIT:

Here is a little sample showing how to replace the input[type=button] with another control (you can use CSS to show it how you want) and then trigger the button click as well.