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()将自定义数据传递给事件处理程序。该链接引用[ data ]函数的可选.on()对象。这允许您将常规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(...)对象的属性。

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

2 个答案: