如何使用Jquery在javascript onClick事件中传递参数？

Question

i want to ask, how to passing parameters in javascript onClick event using Jquery ?

I have been stuck on this problem. after i click the button, i cannot passing the parameters, but if i dont give parameters, its work. what should i do ? sorry if my english is not good.

var ConfirmShowEventRef = firebase.database().ref().child("ConfirmEvent");``
ConfirmShowEventRef.on('child_added', snapshot => {
var bankName = snapshot.child("InMapRekening").val();
var rekNumber = snapshot.child("RekeningNumber").val();
var confirmAt = snapshot.child("confirmAT").val();
var eventTitle = snapshot.child("eventTitle").val();
var id = snapshot.key;

$("#table_transaction").append("<tr><td>"+ id +"</td><td>" + eventTitle + "</td><td><span class='label label-success'>" + bankName + "</span></td><td><div class='sparkbar' data-color='#00a65a' data-height='20'> " + rekNumber + " </div></td><td>" + confirmAt + "</td><td><button type='button' class='btn btn-sm btn-info btn-flat' name='button' id='"+ id +"' onClick='confirm("+ id +")'>Confirm</button></td></tr>");});function confirm(id){alert(id);}

Answer 1

from jQuery .on() documentation : http://api.jquery.com/on/ You know that the .on() method accept those params:

.on( events [, selector ] [, data ], handler )

I'm not going to talk about the selector param because it is irrelevant here.

• the first one if the which are simple strings identifying your event.
• handler a function invoked when the events occurs with the event object as a parameter (corresponding to your snapshot variable) here.
• the second one, and that is your answer, because any data of any type that you pass here will be accessible from the data prop of the event object passed to you handler ( snapshot )

$DOMnode.on('event', { foo: 'bar' }, event => console.log(event.data));

Here event.data will be equal to {foo: 'bar'} ;

Answer 2

There is another way of doing this. There is no need to pass parameters while invoking onclick event, Whatever values you want to use when click event is triggered can be added as attributes to the target element and read later.

<div id="click-sample" some-data="You got data inside Click"> Click Here </div>

$("#click-sample").click(function(e){

    alert($(e.target).attr('some-data'));

});

https://jsfiddle.net/ath78cfy/