Question

您好我正在学习JQuery，并且我编写了一个小函数，其中我通过按钮的单击事件附加了一个函数。

这是HTML的头元素

<script type="text/javascript">

    $(pageLoaded); 

    function pageLoaded() 
    {
        $("#Button1").bind("click", 
                            { key1: "value1", key2: "value2" }, 
                            function buttonClick(event) 
                            {
                               $("#displayArea").text(event.data.key1);
                            }
                            );
    }                    

</script>

这是HTML的正文

<input id="Button1" type="button" value="button" />

<div id = "displayArea" style="border:2px solid black; width:300px; height:200px">

此代码工作正常。但是当我尝试在anonymus方法之外编写buttonClick函数时，它不再起作用了。

我试着这样称呼它：

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick(event));

function buttonClick(var event) 
{
      $("#displayArea").text(event.data.key1);
}

这不起作用。在将Event作为参数传递时，我是否犯了一些错误？不使用匿名方法的正确方法是什么？

Answer 1

你需要传递一个function reference作为点击处理程序，但你在这里做什么

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick(event));

立即调用buttonClick(event)，return undefined调用click handler并将其设置为buttonClick。你必须传递像$(function(){ $("#Button1").bind("click", { key1: "value1", key2: "value2" }, buttonClick); function buttonClick(event) { $("#displayArea").text(event.data.key1); } });这样的函数引用，你将自动获得事件参数（jQuery将在调用处理程序时发送它）。

完整代码：

function expression

演示： http://jsfiddle.net/joycse06/cjc9r/

更新（根据@Tadeck的评论）：

如果您使用var buttonClick = function(event){ $("#displayArea").text(event.data.key1); };这样的

，您的代码将正常运行

first use

你必须把它置于$("#Button1").bind("click", ...之上。在这种情况下

function expressions

因为hoisted不是function declaration，而是only after当前范围的顶部。因此，expression可以interpreted使用JS interpreter {{1}}。{/ 1>

Answer 2

您必须更改解决方案中的两个错误

var仅用于定义变量而不是函数的参数

function buttonClick(event)
{
    $("#displayArea").text(event.data.key1);
}

另一件事是你分配事件处理程序的方式。您指定的buttonClick(event)返回值为undefined。只需将功能传递给它。 event对象将由jQuery

自动传递

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick);

Answer 3

您可以按照以下步骤进行操作：

$('input[name="pin-code"], input[name="work-pin"]').on({
        keypress: function(e) {
            numbersOnly(e);   //function
        }
    });


function numbersOnly(e) {    //function
    e.preventDefault();
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }
}

Answer 4

这是我传递整个点击事件的方式：

$('#body').click({event}, onClickMethod);

function onClickMethod(evt){
    console.log("Click evt:", evt);
}

如何在JQuery函数中将Event作为参数传递

4 个答案: