Weird issue with jQueryUI modal

Weird issue with jQueryUI modal

I'm having a weird issue with the jQueryUI modal (the dialog plugin that
can include modal functionality). I have a dropdown list that is a <span>
with a <ul> that only opens when you click on the <span>. The modal is set
to pop up when the second <li> in the <ul> is clicked. Now, the modal
opens up just fine, however for some reason the link the user has to click
on to get to the modal is somehow transferred to the modal, and when the
modal is closed, it disappears from the <ul>. Also, no text shows up, even
though I put text there. Here is the HTML portion:
<span class="dropdown" id="loggedInDropdown">
<i class="spriteIcons iconArrowUp"></i>
<ul class="zebraRows">
<li><a id="accountSettings"
href="/stuff/settings" title="">Account
Settings</a></li>
<li><a id="addFunds" class="no-close" href=""
title="Add Funds to Your Account">Add
Funds</a></li>
<li><a id="signOut" href="/users/logout"
title="">Sign Out</a></li>
</ul>
</span>
Here is the jQuery:
$('#loggedInDropdown').on('click', '#addFunds', function(e) {
e.preventDefault();
$('#addFunds').dialog({
modal: true,
// other stuff
text: 'Whatever'
});
});