在 .on('click') 事件处理程序中传递函数和函数参数？ [复制]

Question

当我点击按钮时，它会显示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));
});

Answer 1

您有两个问题，首先您需要将对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);
});

Updated fiddle

Answer 2

我认为您正在寻找的是如何使用.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>

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