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?

Answer 1

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.

Answer 2

Data attributes are advised for this purpose. Use:

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

And then:

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

Answer 3

I assume you are trying to pass variable values from backend scripting language to Javascript? One possible way is to output them directly to the javascript

<script language='JavaScript'>
//it's a good idea to have all those vars collected in a single object in order to not overpopulate the global scope
var scriptOutput = {
    param1 : ${param1},
    param2 : ${param1}
}
$(document).ready(function() {
    $("#link123").click(function() {
        func1(scriptOutput.param1,scriptOutput.param2);
    });
});
</script>