将参数传递给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); 
    }); 
}()); 

重新绑定事件：

$('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

只需使用$.proxy从jQuery的

$('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){ 
 
\t console.log(elem) 
 
}

#myBtn{ 
 
\t 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">