使用on（）jQuery方法将'this'作为参数传递给事件处理程序

Posted 2021-04-20

我动态地将类.footprint添加到DOM中，并需要向它们添加click()事件。我当前的代码如下所示：

$("#pcb").on("click", ".footprint", selectFootprint);

但是，selectFootprint(sender)方法有一个参数，我想传递DOM元素（this）。 我该怎么做？

答案

一些解决方案（传递父母的上下文）：

1）使用jquerys数据参数：

$("#pcb").on("click", ".footprint", this, function(e){
  console.log(this, e.data);//data is the parents this
});

2）使用封闭物

var sender = this;
$("#pcb").on("click", ".footprint", function(){
  selectFootprint.call(this, sender);
 });

或者，如果你只想通过.footprint：

$("#pcb").on("click", ".footprint",function(){
 selectFootprint(this);
});

另一答案

急剧地，在on()中，jQuery函数 - this关键字代表被点击的元素，因此您可以按照自己的意愿调用该函数。

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

（从起点）。

或者在你的情况下：

function selectFootprint(){
   console.log( $( this ).text() );
}
$("#pcb").on("click", ".footprint", selectFootprint);

另一答案

而不是直接使用selectFootprint作为回调，而是定义一个新函数，该函数使用this作为参数调用selectFootprint（这在eventlistener中始终引用侦听器附加到的DOM元素）

$(".footprint").on("click", function() {
  selectFootprint(this);
});