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.