在 .on('click'） 事件处理程序中传递函数和函数参数

Passing function and function argument in .on('click') event handler?

本文关键字：传递函数 参数 程序 函数 on click 事件处理      更新时间：2023-09-26

当我单击按钮时，它会说Bruce Wayne is Batman .在最后一个jQuery行中，对于"click"函数，如果我传递参数"guy"，jQuery将不会运行，但是如果我不传入参数，我会得到undefined。我做错了什么？提前谢谢。

$("div").on('click', 'button', click(guy));

jsFiddle链接，HTML和JS如下。

https://jsfiddle.net/wrj5w1Lk/

<div>
    <button>
        Click Me! Click Me!
    </button>
    <p>Hello</p>
</div>

$(document).ready(function() {
    var Person = function(first, last, secret) {
        this.first = first;
        this.last = last;
        this.secret = secret;
    }
    var guy = new Person("Bruce", "Wayne", "Batman");
    var click = function(person) {
        $(this).closest('div').find('p').text(person.first + " " + person.last + " is " + person.secret);
    };
    $("div").on('click', 'button', click(guy));
});

您有两个问题，首先您需要将 click() 的调用包装在匿名函数中。其次，您需要将当前button元素的引用传递给click()函数。试试这个：

var click = function($element, person) {
    $element.closest('div').find('p').text(person.first + " " + person.last + " is " + person.secret);
};
$("div").on('click', 'button', function() {
    click($(this), guy);
});

更新的小提琴

我认为您正在寻找的是如何使用 .on() 将自定义数据传递给事件处理程序。该链接引用.on()函数的可选[ data ]对象。这允许您将正常event数据之外的自定义数据传递给事件处理程序以进行进一步处理。示例如下所示：

$(document).ready(function() {
    var Person = function(first, last, secret) {
        this.first = first;
        this.last = last;
        this.secret = secret;
    }
    var guy = new Person("Bruce", "Wayne", "Batman");
    var click = function(event) {
        $(this).closest('div').find('p').text(event.data.first + " " + event.data.last + " is " + event.data.secret);
    };
    $("div").on('click', 'button', guy, click);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button>
        Click Me! Click Me!
    </button>
    <p>Hello</p>
</div>

我已经编辑了您问题中的片段以使用这种传递数据的方法。自定义对象在回调的event.data对象中传递。通过访问，event.data.[first,last,secret]可以从回调中引用Person(...)对象的属性。

相关文章：