如何在jQuery事件处理程序中调用带参数的JavaScript函数？

Question

我卡住了。已经搜寻和尝试了几个小时。

编辑： 我还是无法让它工作。好吧，我会把源代码放在这里，以便更清楚地说明我想要实现什么。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript">
    var date_fmt="yyyy-mm-dd";
    var time_fmt="HH:MM";
    var date_field="#id_start_0, #id_end_0"; //id refering to html input type='text'
    var time_field="#id_start_1, #id_end_1"; //id refereing to html input type='text'


    function clearFmt(fmt_type)
    { 
        if($(this).val() == fmt_type) {
            $(this).val("");

        }
    }

    function putFmt(fmt_type)
    {
        if($(this).val() == "") {
            $(this).val(fmt_type);
        }
    }


$(document).ready(function() {

    $(date_field).attr("title",date_fmt);
    $(time_field).attr("title",time_fmt);

    $(date_field).click(function() {
        clearFmt(date_fmt);
    });   

    $(date_field).blur(function(){
        putFmt(date_fmt);
    });

    $(time_field).click(function(){
        clearFmt(time_fmt);
    });   

    $(time_field).blur(function(){
        putFmt(time_fmt);
    });

});
</script>

需要帮忙吗？

- mhd

---

你想在点击时而不是实例化时评估myFunc函数，对吗？ - Stefan Mai

Answer 1

使用jQuery的bind方法：

function myfunc(param) {
    alert(param.data.key);
}

$(document).ready( function() {
    $("#foo").bind('click', { key: 'value' }, myfunc);
});

请参见我的jsfiddle。

=== 更新 ===

从jquery 1.4.3开始，您也可以使用：

function myfunc(param) {
    alert(param.data.key);
}

$(document).ready( function() {
    $("#foo").click({ key: 'value' }, myfunc);
});

另请参见我的第二个jsfiddle。

=== 更新2 ===

每个函数都有自己的this。在此函数中调用clearFmt后，this不再是所点击的元素。我有两个类似的解决方案：

在您的函数中添加一个参数，例如element，并将$(this)替换为element。

function clearFmt(element, fmt_type) {
    if (element.val() == fmt_type) {
        element.val("");
    }
}

在调用该函数时，您需要添加参数$(this)。

$(date_field).click(function() {
    clearFmt($(this), date_fmt);
}); 

还可以查看我的第三个 jsfiddle。

-=-

另外一个选择：

function clearFmt(o) {
    if ($(o.currentTarget).val() == o.data.fmt_type) {
        $(o.currentTarget).val("");
    }
}
$(date_field).click({fmt_type: date_fmt}, clearFmt); 

请参见我的第四个 jsfiddle。

- scessor

---

非常感谢！我使用了您的第三个jsfiddle解决方案。 - mhd

Answer 2

以下内容应该与此实时演示相同：

function myfunc(bar) {
    alert(bar);
}

$(function() {
    $("#foo").click( function() {
        myfunc("value");
    });
});

- Darin Dimitrov

Answer 3

anyFunctionName = (function()
{
    function yourFunctionName1()
    {
        //your code here 
    }

    function yourFunctionName2(parameter1, param2)
    {
        //your code here 
    }

    return
    {
        yourFunctionName1:yourFunctionName1,
        yourFunctionName2:yourFunctionName2
    }
})();

$document.ready(function()
{
    anyFunctionName.yourFunctionName1();
    anyFunctionName.yourFunctionName2();
});

注意：如果您不使用“anyFuctionName”来声明任何函数，则无需返回方法。只需简单地编写您的函数，如yourFunctionName1()。

在$document.ready部分，参数不是问题。您只需在此处放置您的函数名称即可。如果您使用“anyFuctionName”函数，则必须遵循上述格式。

- Abdur Rahman

Answer 4

function myfunc(e) {
  alert(e.data.bar); //this is set to "value"
}

$("#foo").click({bar: "value"}, myfunc);

- Ariel

Answer 5

人们把这件事复杂化了，像在Javascript中一样直接调用即可。

myfunc("value");

- TheTechGuy