javascript - 将参数传递给 jQuery 中的单击事件

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

重新绑定(bind)事件:

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