how to pass dynamic parameters to jquery function

Question

I want to pass some dynamic paramters to jquery onClick event. Before, I used this HTML and JavaScript:

<!-- HTML -->
<a id="link123" href="link1" onClick="javascript:func1(${param1},${param2});">123</a>

/* JavaScript */
func1(param1,param2) {
   // do something
}

The parameters param1 and param2 come from backend code and are dynamic. How I get this is not important here.

After using jQuery, I have this HTML and JS:

<a href="link123">
<input type="hidden" id="param1" value="${param1}"/>
<input type="hidden" id="param2" value="${param2}"/>

$(document).ready(function() {
  $("#link123").click(function() {
    var param1 = $("#param1")[0].value;
    var param1 = $("#param1")[0].value;
    func1(param1,param2);
  });
});

func1(param1,param2) {
  //do something
}
function func1 is there as before.

I'm not happy with this solution (passing params as inline hidden values). What are other, better ways to pass dynamic parameters to jQuery, in situation like this?

Solution 1

Data attributes are advised for this purpose. Use:

<input data-param1="${param1}" />

And then:

$('input').click(function(){
   $(this).attr('data-param1');
});

Solution 2

You could inline those parameters like you did before.

  $("#link123").click(function() {
    func1(${param1}, ${param2});
  });

That is, your PHP (or whatever) generates javascript with already substituted param values.