How to pass parameter with a href and onclick function

Question

I want to pass parameter when I click in <a href>, first I have this and works fine:

    <a href="#" rel="like{{num}}"> I like </a>|

   $("a[rel^='like']").click(function(){
            $.ajax({
                ...
            });

but I don't know how to pass parameter to that function, so I do this:

    <a href="#" rel="like{{num}}"
          onclick="cap(para1, para2)"> I like </a>

Finally, in my Javascript I have this simple function:

    function cap(para1, para2){
        alert('here');
    }

but I obtain this error:

ReferenceError: cap is not defined

Any idea?

Answer 1

A solution is to use data attributes :

<a href="#" rel="like{{num}}" data-para1="Oh"  data-para2="{{somepara}}"> I like </a>

<script>
function cap(para1, para2){
    alert('here');
}
$("a[rel^='like']").click(function(){
   var para1 = this.dataset['para1'];
   var para2 = this.dataset['para2'];
   cap(para1, para2);
});
</script>

You may also write it like this if you prefer a more structured approach :

<a href="#" rel="like{{num}}" data-params="{'para1':'Oh','para2':'{{somepara}}'}"> I like </a>

$("a[rel^='like']").click(function(){
   var params = this.dataset['params'];
   var para1 = params.para1;
   var para2 = params.para2;

Note that if the document isn't an HTML5 document you'll have to use the more compatible data function of jQuery (but there hardly is any reason not to use HTML5 doctype today) :

var para1 = this.data('para1');

Answer 2

You may like to try this.

<a class="ilike" href="javascript:;" data-p1="abc" data-p2="123"> I like </a>

<script>
    function cap(para1, para2){
        alert('here');
    }

    $(function(){
        $('.ilike').click(function(){
            var $this = $(this);
            var p1 = $this.data('p1');
            var p2 = $this.data('p2');
            cap(p1, p2);
        });
    });

</script>