將參數傳遞給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">