Question

p.num = 100;    
$('body').on('click', '.del', this.delete.bind(this));

p.delete = function(e) {
     console.log(this.num); //100
     //how can I get the .del element?

}

我正在尝试获取产生点击的元素，但我还需要访问num属性。

如何在我的删除方法中访问这两种类型的'this'？

Answer 1

事件的回调会收到一个Event对象，您可以使用该对象来检索调用该事件的元素。

function(e) {
    var element = $(e.target); //This is the element that the event was called on.
}

Answer 2

_{免责声明：这是我的确切答案（根据当前代码改编而来）：Pass additional arguments to event handler?}

_{然而，这个问题似乎并不完全重复（但我可能错了）。}

正如.on的文档中所述，您可以将数据传递给您的活动。

.on（events [，selector] [，data]，handler）

数据

类型：任何

触发事件时要在event.data中传递给处理程序的数据。

所以你的活动看起来像那样：

p.num = 100;    
$('body').on('click', '.del', {object : this}, this.delete);

p.delete = function(e) {
  var myObj = e.data.object;
  // [myObj] will be your plugin
  // [this] will be the clicked element
  // [e] will be you event
}

Answer 3

如果您正在使用jquery，您可以将这些功能合并为一个，如下所示：

注意：num是一个属性，因此您必须使用.attr()。

＆＃13;

$(document).ready(function() {
    $('body').on('click', '.del', function() {
        var num = $(this).attr('num');
        alert('click function and num = ' + num);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" num="500" class="del">Delete</a>

＆＃13;

或者如果你真的想让它们保持独立的功能....：

＆＃13;

$(document).ready(function() {
    $('.del').on('click', function() {
        deleteThis($(this));
    });
});
function deleteThis(element){
    var num = element.attr('num');
    alert('click function and num = ' + num);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" num="100" class="del">Delete</a>

＆＃13;

另外，如果您为click和delete使用单独的函数，请将元素从click传递给delete：传递元素 - callDeleteFunction($(this))，并检索元素 - myDeleteFunction(element aka $(this))

Answer 4

我不确定你在问什么，但也许这就是你想要的：

var p = {};
p.num = 100;    
$('body').on('click', '.del', p.delete); // don't bind to this

p.delete = function(e) {
     console.log(p.num); // here you still can call p
     // this is del DOM element

}

将此传递给方法？

4 个答案:

数据