如何调用jQuery函数，使其可以在document.ready函数中运行？

Question

In my application I have a script:

<script type="text/javascript">
function pageLoad(sender, args){
    $('#nursing').click(function () {
        document.getElementById("ddlPositionType").selectedIndex = 1;
        $("#btnSearch").click();
        a.href = "#";
        return false;
    });
}
</script>

Then below it I am attempting to call it when the page is loaded like this:

<script type="text/javascript">
$(document).ready(function () {
    $('#nursing').click();
});
</script>

This does not fire when the page load as it should and it causes no errors in my console. What is most confusing is that if I took from document to return false from the first code block and placed it where I am trying to call the $('nursing').click(); the code will run like it is supposed to.

As reference #nursing is simply a link used on my slider to control content.

<a id="nursing" class="oslide">Nursing Positions</a>

Answer 1

The code you've written in pageLoad is an instruction to set up a click handler. That setup will not be executed unless the pageLoad function is called prior to your call to click the button in document.ready. The easy fix may be to simply modify your code so that it calls pageLoad, and then clicks the anchor.

<script type="text/javascript">
$(document).ready(function () {
    pageLoad();
    $('#nursing').click();
});
</script>

But this seems a lot of overkill to call a function by performing a click. Why not just make a function out of the click handler and call that code in document.ready instead? If you still need the click handler, call the function in the click handler.

function onNursingClick() {
    document.getElementById("ddlPositionType").selectedIndex = 1;
    //... and so on....
}

function pageLoad() {
    $("#nursing").click(onNursingClick);
}

$(function() {  //shorthand for $(document).ready(...);
   onNursingClick();
   pageLoad();
})

Answer 2

It's not working because in your document.ready script you're not calling the function pageLoad() that you created earlier. You are firing a click event. So try this:

<script type="text/javascript">
    $(function(){     //Jquery shorthand for document.ready
        pageLoad(sender, args); //pass in what you need
    });
</script>