Function not recognized from jQuery

I've got a .js file that has this function in it:

function showDialog(divID) 
{
    alert("got here");

    var dialogDiv = $(divID);

    dialogDiv.dialog
    (
        {
            bgiframe: true,
            modal: true,
            autoOpen: false,
            show: 'blind'
        }
    )

    dialogDiv.dialog("open");
}

And i开发者_运维百科n my page this:

<script type="text/javascript">

    $(function()
    {
        $("input.invokeDialog").click.showDialog("#testDialog");
    });

</script>

I'm trying to figure out why it doesn't recognize my showDialog function. Is it not possible to reference it with the dot as I am doing? Do I need a jQuery specific function or syntax for it to know that it's a jQuery function or is there no such thing?

The problem with click.showDialog("#testDialog") is that it means you are trying to call a function called showDialog which is part of the click object. You have defined the showDialog function as a free-floating function, so you don't need anything in front of it to call it.

The code in Sarfraz's answer should work well for what you're trying to do.

Try this:

  $(function()
    {
        $("input.invokeDialog").click(function(){
           showDialog("#testDialog");
        });
    });

<script type="text/javascript">

    $(function()
    {
        showDialog("#testDialog");
    });

</script>

What about this?