JQuery .click, nor .on("click", ...) working with ASP .NET and twitter-boostrap elements created using a function
===

I tried wording this question the best I could... I'm sorry if it wasn't clear but here is my issue.

This is my .js file"

     $(function()
     {
	     $(".dropup").on("click", function(e) { alert(''); });
	
	     $(".chat-friend").click(newChat);
     });

  
     function newChat()
     {			
        var chatboxExpandedHTML = '<ul id="chatwindow-expanded" class="dropdown-menu">' +
							    '<li><span style="background-color:red"></span></li>' +
							    '<li><b>Bob:</b></li>' +
							    '<li>I like mashed taters.</li>' +
							    '<li><b>You</b></li>' +
							    '<li>I like mashed taters too.</li>' +
							    '<li>And chicken too.</li>' +
							    '<li><b>Bob:</b></li>' +
							    '<li>We can\'t be friends any more.</li>' +
							    '<li><input type="text" class="chatter" placeholder="Type something…"></li>' +
							    '<li class="divider"></li>' +
							  '</ul>';
	    var chatboxMiniHTML = '<li class="dropup">' +
	                          '<span href="#"class="message-box dropdown-toggle" data-toggle="dropdown"><b>Test123</b></span>'
	   + chatboxExpandedHTML +
	                          '</li>';

						   
	    $('#chatbar-center').append(chatboxMiniHTML);
     }

here is the view just in case it's needed..

    <%@ Control Language="C#" ClassName="Octgn.App.c" %>
	<link href="../../Content/css/ChatbarStyle.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/js/chatservice.js" type="text/javascript"></script>

	<div class="chatbar">
		<div class="navbar">
			<div class="navbar navbar-fixed-bottom">
		    	<div class="navbar-inner">
		    			<ul id="chatbar-left" class="nav pull-left">
							<li><a href="#"><i class="icon-cog icon-white"></i>Settings</a></li>
				            <li class="divider-vertical"></li>
				    	</ul>
		    			<ul id="chatbar-center" class="nav">
		    			
		    			</ul>
		    			<ul id="chatbar-right" class="nav pull-right">
		    				<li class="divider-vertical"></li>
		    				<li class="chat-availability"></li>
							<li class="dropup">
				              <a href="#" id="friends" class="dropdown-toggle" data-toggle="dropdown">Friends(1)</a>
				              <ul id="friendslist" class="dropdown-menu">
				                <li><a href="#" class="chat-friend">Alice</a></li>
				                <li><a href="#" class="chat-friend">Bob</a></li>
				                <li class="divider"></li>
				              </ul>
				            </li>
			                <li class="divider-vertical"></li>
							<li class="notifications">1</li>
				    	</ul>
		    		</div>
		    <div>
	    </div>
	</div>

This is what works: I click on the element with a .chat-friend class, and the element with the class .message-box appends to #chatbar-center just fine.  No problems there.

I click on the button that it creates, and it creates the dropup with the class .chatwindow-expanded, the element with the input in it, just fine.

It's when the message-box is created that the events don't work. The alert shows up when I click the friends list, but not the message box, even though they are bot in the dropups class.

What am I doing wrong here?  Is it because it's being created in a function and the event is created before the element is created?  is it because the string is using the '+' instead of '\'?  I tried using that but the button wouldn't even show up, and it does with '+'.

My head is pounding because of this.  I've already tried variations of .on("click", ...) and .click(...); I have also tried putting $('input') and $('li'), etc... so many different things.