Split up and modify an element with jQuery

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/

Have you seen http://stackoverflow.com/questions/516265/jquery-unbind-event-handlers-to-bind-them-again-later ? — pete, Feb 03 '12 at 20:58
@pete Does it matter if I'm talking about inline JavaScript? — henryaaron, Feb 03 '12 at 21:00
Try this plugin: http://archive.plugins.jquery.com/project/copyEvents — skybondsor, Feb 03 '12 at 21:01
I sometimes find a plugin that is smaller and easier to integrate than whatever I might be able to come up with. The one I linked to, for instance, is only 43 lines long and totals 4K unpacked. — skybondsor, Feb 03 '12 at 21:14

score 2 · Answer 1 · answered Feb 03 '12 at 21:04

2

You could do (i used a simple javascript function to test it)

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

var onclick = $('.mediumbutton').attr('onclick');

var but =  $('<input/>', { type: "button", value: "pressme", onclick: onclick});

$('.mediumbutton').replaceWith(but);

fiddle here http://jsfiddle.net/KjBm3/

answered Feb 03 '12 at 21:04

Nicola Peluchetti

76,206
31
145
192

@user1090389 it works with jQuery 1.4.4 http://jsfiddle.net/KjBm3/1/ i can't test it with 1.4.2 but it should be the same – Nicola Peluchetti Feb 04 '12 at 11:32
For some reason it won't work on my site, I tried it with 1.3.2 and it doesn't work... – henryaaron Feb 04 '12 at 23:09

score 0 · Accepted Answer · answered Feb 03 '12 at 21:01

0

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'); });

answered Feb 03 '12 at 21:01

kitti

14,663
31
49

Same way all the jQuery UI plugins work. They hide the element you selected and replace it with a pretty element, then link everything up behind the scenes. – kitti Feb 03 '12 at 21:06
Truth, I'm looking for a more natural solution but it was a creative idea so I like it. I made a fiddle but I may want a different solution. http://jsfiddle.net/rAMcw/1/ – henryaaron Feb 03 '12 at 21:09

score 0 · Answer 3 · answered Feb 03 '12 at 21:09

0

How about cloning?

var x = $('input').clone(true);
x.attr('type','button').addClass('previous_page_img graybutton mediumbutton').val('Previous Page');
$('input').replaceWith(x);

Updated jsFiddle

answered Feb 03 '12 at 21:09

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Feb 03 '12 at 21:13

0

What is wrong with turning the existing input element into a button?

$("input.previous_page_img").prop("type", "button").val("Previous Page");

jQuery 1.4.2: (set the property in plain-old JavaScript);

$("input.previous_page_img").val("Previous Page")[0].type = "button";

Demo

answered Feb 03 '12 at 21:13

Dennis

32,200
11
64
79

Updated it for the older version. – Dennis Feb 03 '12 at 21:18
Okay but if the element, doesn't exist on a certain page, the rest of the jQuery fails? – henryaaron Feb 03 '12 at 21:23
Then you'd have to check first to see if it exists. Why exactly are you making a change on an element that might not exist? Is there a reason you can't just create a button in the original HTML? – Dennis Feb 03 '12 at 21:35
Unfortunately, my software doesn't allow me to modify core asp pages, in fear that I might comply the stability/security of the site. That's why I have to do all this. The element does not exist on certain pages, but the js files are still being called on this pages... – henryaaron Feb 04 '12 at 23:12

Split up and modify an element with jQuery

4 Answers4