将参数传递给jQuery中的click事件

Question

我有一个onclick事件，它将$(this)参数传递给函数。

<tr class="myTr">
  <td>
    Han Solo
  </td>
</tr>  

<script>
$('body').on('click','.myTr',function(){
  doSomething($(this));
});
</script>

现在，我想添加另一个步骤。 我想显示一个按钮，单击此按钮后，应该调用doSomething() 。

<tr class="myTr">
  <td>
    Han Solo
  </td>
</tr>  
<button id="myBtn" style="display:none">Submit</button>

<script>
  $('body').on('click','.myTr',function(){
    $('#myBtn').show();
  });
  $('#myBtn').click(function(){
    doSomething(???);
  });
</script>

如何将$(this)传递给第二个点击事件？

我可以轻松地将$(this)存储为按钮的标签，如下所示：

$('body').on('click','.myTr',function(){
  $('#myBtn').attr('origin', $(this));
  $('#myBtn').show();
});
$('#myBtn').click(function(){
  var tr = $(this)attr('origin');
  doSomething(tr);
});

但是我想知道是否有更优雅的方法来解决这个问题？

Answer 1

您需要以某种方式设置状态

数据属性：

$('body').on('click','.myTr',function(){
  $('#myBtn').data('origin', $(this)).show();
});
$('#myBtn').click(function(){
  var tr = $(this).data('origin');
  doSomething(tr);
});

局部变量

(function () {
    var active;
    $('body').on('click','.myTr',function(){
      active = $(this);
      $('#myBtn').show();
    });
    $('#myBtn').click(function(){      
      doSomething(active);
    });
}());

重新绑定事件：

$('body').on('click','.myTr',function(){
  var active = $(this);
  $('#myBtn')
    .off("click.tr")
    .on("click.tr", function () {
      doSomething(active);
    })
    .show();
});

CSS类：

$('body').on('click','.myTr',function(){
  $(".myTr.active").removeClass("active");
  $(this).addClass("active");
  $('#myBtn').show();
});
$('#myBtn').click(function(){
  var tr = $(".myTr.active");
  doSomething(tr);
});

Answer 2

只需使用jQuery中的$.proxy

 $('body').on('click','.myTr',function(){ $('#myBtn').show(); $('#myBtn').off('click').on('click', $.proxy(function(e) { doSomething(this) // how you access the context of the button is using $(e.currentTarget) }, this)); }); window.doSomething = function(elem){ console.log(elem) } 

 #myBtn{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="myTr" value="test"> <input type="button" id="myBtn" value="button">