在外部 js 文件中引用 jQuery 事件处理程序

Question

How do I use event handlers in jQuery when I have them in external files?

I'm using Phonegap to build an app, and for cleanliness sake, want to hold each jQuery function in a different js file.

But when I try to click the button that the event handler is bound to, nothing happens.

The event isn't fired.

I'm calling the js files after I load jQuery, just thought I'd say that.

External JS

$("#getname").click(function()
{
        var youruname = localStorage.youruname;
            
        var PostData =
        {
            youruname: youruname,  
        };
        
        $.ajax
        ({
            url: "http://www.yellowcabsavannah.com/tag/tag_logout.php",
            type: "POST",
            data: PostData,
            async: false,
            dataType: 'json',
            cache: false,
            success: function(data)
            {
                //do stuff
            }
        });
    }
});

Main File JS

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="tag.js"></script>
<script type="text/javascript" src="logout.js"></script>
<script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>

<div id="toolbar"><p>Who: <span id="name">Tap To Choose</span> - </p><a href='#' id="tag" class="mapbutton">Tag</a><br /><a href='#' id="logout" class='mapbutton'>Logout</a></div>

Answer 1

try by binding live or on

$("#getname").live('click',function(){...})
$(document).on('click',"#getname",function(){...})

Answer 2

Your html does not have an element with the id of getname . I am assuming you want to bind an event to the element with the id of name so try this:

$("#name").click(function() {

    alert("clicked");
});

Or change the span id from name to getname so

<span id="name">Tap To Choose</span>

becomes

<span id="getname">Tap To Choose</span>

and your event handler $("#getname").click should work just fine.