jQuery vs Javascript单击

Question

I have read many topics how to handle Javascript's onclick vs Jquery;s .click(), but I can't figure out how to pass parameters using jQuery.

1st option - Javascript, HTML

The HTML

<input type="button" onclick="doAction(<?=$id?>,'order');" />

Therefore in JS I can do

function doAction(id,type){

 //do something here

}

2nd option - jQuery,HTML

The HTML

<input type="button" id="trigger" />

So jQuery becomes

$("#trigger").click(function() {

   //do something here

 });

Do I have to do something like (in this case how do I know the values of id and type?)

  $("#trigger").click({id: "???", type: "????"}, other_function);

  function other_function(event){
     id = event.data.param1;
     type = event.data.param2;
   }

Do I have to "pass parameters" by using

  HTML
  <input type="hidden" id="id" value="<?=$id?>" />
  <input type="hidden" id="type" value="order" />

  jQuery

   $("#trigger").click(function(){
      var id = $("#id").val();
      var type = $("#type").val();
      //do something

   });

I want to avoid using onclick() as I have read that it should be avoided. I just need a suitable way to pass parameters as I did by using onclick().

Answer 1

You can use data to pass the data() to event.

Live Demo

 <input type="hidden" id="id" data-idatt="123" />
 <input type="hidden" id="type" value="order" />

 $("#trigger").click(function(){
    var id = $("#id").data("idatt").val();
 });

Answer 2

You don't need to take parameter from outside and don't need hidden field either

$("#trigger").click(function(){
      var id = <?=$id?>;
      //do something
   });

Answer 3

using chrome open up the console and try this

$(#trigger);
$(#trigger).click(function(e) {
  console.log(
               $(this),
               $(this).attr('type') 
             );
});

the function has a hidden variable called this and is the element you triggered the event.

Answer 4

$("#myElement").click({ "a": 1, "b": 2 }, function (e) {
    alert(e.data.a); // alerts 1
    alert(e.data.b); // alerts 2
});