将参数传递给jQuery中的单击事件
我有一个onclick
事件将一个$(this)
参数传递给一个函数。将参数传递给jQuery中的单击事件
<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);
});
但我不知道是否有解决这个更优雅的方式?
你需要设置以某种方式状态
数据属性:
$('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);
});
只需使用$.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">
此代码存在缺陷,您需要解除最后一次附加的点击。还有,你为什么使用'bind'而不是'on'?它已被弃用。 – epascarello
@epascarello我不是jQuery专家,我只是知道如何使用我的资源并理解它们,我刚刚开始“绑定”,因为我不太了解“on”。我不明白他为什么需要解除绑定?他只是试图传递上下文,他甚至可以访问我在代码中声明的按钮本身的上下文。我不想争辩,我只是想帮助。有一个很好的例子 – Roljhon
在你的例子中点击按钮“myTr”两次,比单击myBtn。您将看到两个console.log行,因为现在多个onlcick事件将被绑定到该按钮。 – epascarello
使用数据属性,而不是attr的。 '$('#myBtn')。data('origin',$(this));'和'$(this).data('origin');' – epascarello
使用全局变量? – Roljhon
其他选项是解除绑定并重新绑定click事件,更新脚本以使用带有闭包的变量。我会使用数据attr。 – epascarello