Question

Here’s a confusing question. I need to replace an <input> with a different <input> but I need to preserve the onclick attribute. Here’s an example:

<input type="image" class="previous_page_img graybutton mediumbutton" src="btn_prevpage.png" onclick="Add_Search_Param('page', 1); Refine();" alt="">

Since I cannot change the <input> type to a button, I want to replace it with a button, however, I need to preserve the “onclick” attribute. So first, I’d have to break up the element. Replace it with a button and append the original onclick attribute to the new button.

So in the end, I’d have this onclick="Add_Search_Param('page', 1); Refine();" added to the new button. Since the onclick changes, a simple .attr or .prop function would not be sufficient. It must clone the onclick attribute. Can anyone help me? Thanks.

Here’s jsFiddle that does not preserve the onclick attribute but does everything else: http://jsfiddle.net/rAMcw/

Answer 1

Just create a new button right after the input, set the input to display: none; (or jQuery('#input').hide()) and have the button onclick trigger the input’s onclick (jQuery('#button').click(function(){ jQuery('#input').trigger('click'); });