jQuery将onclick函数附加到元素

Question

I have four image buttons with onclick events attached to them two pairs of two. I'm trying to replace those image buttons with text buttons and reattach the onclick function to the next text buttons. These buttons are not always on the page and I'm confined to using jQuery 1.4 otherwise .prop would make this a lot easier.

Consider this HTML:

<input type="image" src="path/to/image.gif" class="one" onclick="function()" />
<input type="image" src="path/to/image.gif" class="one" onclick="function()" />
<input type="image" src="path/to/image2.gif" class="two" onclick="function()" />
<input type="image" src="path/to/image2.gif" class="two" onclick="function()" />

I wrote the following jQuery code to get the onclick function, the inputs and rebind the onclick function.

$('input.one').each(function(){
  var oneOnClick = $(this).attr('onclick');
  $(this).replaceWith('<input type="button" value="one" class="one" onclick="'+oneOnClick+'" />');
)};

And the same for .two . I found out that the way the value of the onclick attribute is returned in jQuery means this cannot be done.

Using some resources online I updated my code to look like this:

var oneOnClick = $('input.one').first().attr('onclick');
var twoOnClick = $('input.two').first().attr('onclick');

$('input.one').each(function(){
  $(this).replaceWith('<input type="button" class="one" value="one"/>');
});
$('input.two').each(function(){
  $(this).replaceWith('<input type="button" class="two" value="two"/>');
});

$('input.one').live("click", oneOnClick);
$('input.two').live("click", twoOnClick);

But I'm getting an error

TypeError: undefined is not an object (evaluating 'b.split')

when input.one doesn't exist.

How can I make this work?

Answer 1

Please try the following code to bind onClick event

$(document).ready(function(){
    $('input.one').each(function(){
       $(this).attr('type',"button");
    });
});

Answer 2

Well I suggest you to go with your first opted method:

Check this DEMO

function clickOne()
{
    alert('hi');
}
function clickTwo()
{
    alert('helleo');
}

$(document).ready(function(){
    var oneOnClick = $('input.one').first().get(0).attributes.onclick.nodeValue;
    var twoOnClick = $('input.two').first().get(0).attributes.onclick.nodeValue;
    $('input.one').each(function(){
        $(this).replaceWith('<input type="button" value="one" class="one" onclick="'+oneOnClick+'" />');
    });

    $('input.two').each(function(){
        $(this).replaceWith('<input type="button" value="two" class="two" onclick="'+twoOnClick+'" />');
    });
    $('input.one').live("click", oneOnClick);
    $('input.two').live("click", twoOnClick);
});

POINT TO NOTE:

• $('input.one').attr('onclick') or $('input.two').attr('onclick') holds the value of the onclick attribute (which is a string). However, because the browsers treat the event attributes in a different way, they are returned with function onclick() { clickOne() } and you know about this. Thus, if you want to directly call the function, you'll have to either strip the function() {} or call it immediately or get it using get(0).attributes.onclick.nodeValue
• wrap clickOne and clickTwo in head and remaining things on document.ready