JQuery replace onClick in h:commandLink

Question

What I am trying to do is replace a on click with JQuery.

< h:commandLink onClick="hi" value="Button"/>

to

< h:commandLink onClick="function(hi)" value="Button" />

Is it possible to select inside a command with JQuery? And more specifically can you do it with JSF tags?

Thanks for the help!

Answer 1

Figured it out. Here is the answer.

$( ".class" ).attr('onclick', 'whatever I want it to be');

So you can do it this way.

<h:commandLink class='btn' onClick="hi" value="Button"/>
var text = $('.btn').attr('onclick');

$('.btn').attr('onclick', "function("+text+")");

Take it a bit further and do it for every button on the screen.

$('.btn').each(function () {
      var text = $(this).attr('onclick');

      $(this).attr('onclick', "function("+text+")");
});

Answer 2

You could give the button an id or class and call a click() function on it.

EDIT

$( ".class" ).click(function() {  //Or #id
    //Do work
});

This way any element with that class or id will call that function, it still works like an onClick event

Answer 3

To select on a namespaced attribute you can use a filter. Here's a demo using your code:

http://jsfiddle.net/fBv4q/

$('button').filter(function() { return typeof $(this).attr('h:commandlink') != 'undefined'; }).attr('onclick','alert(111)').html('Modified onClick');

The 'undefined' check is important because your attribute doesn't have a value, but it still exists.

And rather than supplying a function call as a string, look into using jQuery's "on" method to attach the event