jQuery vs Javascript click

jQuery vs Javascript click

本文关键字：click Javascript vs jQuery      更新时间：2023-09-26

我读过很多关于如何处理Javascript的onclick vs . Jquery .click()的话题，但是我不知道如何使用Jquery传递参数

第一个选项- Javascript, HTML

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

因此在JS中我可以做

function doAction(id,type){
 //do something here
}

第二个选项- jQuery,HTML

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

jQuery变成了

$("#trigger").click(function() {
   //do something here
 });

我是否必须这样做(在这种情况下，我如何知道id和type的值?)

  $("#trigger").click({id: "???", type: "????"}, other_function);
  function other_function(event){
     id = event.data.param1;
     type = event.data.param2;
   }

必须通过

传递参数吗?
  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
   });

我想避免使用onclick()，因为我已经读到它应该避免。我只需要一种合适的方式来传递参数，就像我使用onclick()一样。

您可以使用data来传递data()给事件。

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();
 });

您不需要从外部获取参数，也不需要隐藏字段

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

使用chrome打开控制台并尝试这个

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

函数有一个名为this的隐藏变量，它是触发事件的元素。

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