10

嗨，我正在学习 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);
}

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

4

4 回答 4

15

您需要将 afunction reference作为点击处理程序传递，但是您在此处执行的操作

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

立即调用buttonClick(event)和 whichreturn undefined并将其设置为click handler. 您必须传递一个函数引用buttonClick，您将自动获得事件参数（jQuery 将在调用处理程序时发送它）。

完整代码：

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

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

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

更新（基于@Tadeck 的评论）：

如果您function expression这样使用，您的代码将正常工作

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

你必须把它放在它上面first use。在这种情况下之前

$("#Button1").bind("click", ...

因为function expressions不在hoisted当前范围的顶部，例如function declaration. 所以你可以使用它们only after。expressioninterpretedJS interpreter

于 2012-06-29T09:16:16.637 回答
2

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

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

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

另一件事是您分配事件处理程序的方式。您正在分配的返回值buttonClick(event)将是undefined. 只需将函数本身传递给它。该event对象将由 jQuery 自动传递

$("#Button1").bind("click", 
                   { key1: "value1", key2: "value2" }, 
                   buttonClick);
于 2012-06-29T09:17:27.323 回答
1

你可以这样做：

$('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;
    }
}
于 2019-04-16T08:12:38.093 回答
0

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

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

function onClickMethod(evt){
    console.log("Click evt:", evt);
}
于 2020-03-07T19:04:07.597 回答