JQuery 按钮单击未注册

我创建了一个模拟推特网站，一旦点击一个按钮，它就会生成更多的推文。我已经创建了附加到网站主要部分的按钮，但似乎一旦单击它，绝对不会发生任何事情。我一遍又一遍地查看，以确保我的代码是正确的，但我担心我只是错过了一些东西。下面是我的JQuery和CSS。

JQuery：

  $(document).ready(function(){
    var $body = $('body');
    var $section = $('.main');
    $section.html('');
    //Returns a div with a time stamp for the tweet
    var createdTime = function(tweet){
        return $('<div>', {text: tweet.created_at, id: 'dT'}).prop('outerHTML');
    };
    //Returns the @handle as a link of the user who tweeted
    var userName = function(tweet){
        return $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML') + '<br />' + '@' + tweet.user; 
    };
    // simply returns the users tweeted message
    var tweetContent = function(tweet){
        return tweet.message;
    };
    var index = streams.home.length - 1;
    // A function that generates new tweets
    var newTweets = function(index){
    while(index >= 0){
            var tweet = streams.home[index];
            var $tweet = $('<div class=tweet></div>');
            //call to outside function to populate tweets
            $tweet.html(userName(tweet) + ': ' + tweetContent(tweet) + createdTime(tweet));
            $tweet.appendTo($section);
            index -= 1;
        }
    }
    newTweets(index);
    //Adds a user image to tweet  
   $('.tweet').prepend('<img id=tweetImg src=images/blank-user.jpg />');
    //button created to generate more tweets after page has loaded
   var $button = $('<button />', {
       type: 'button',
       'class':'tweetButton',
       id: 'mT',
       text: 'More Tweets',
       click: function(){
          index = streams.home.length-1;
           newTweets(index);
           alert('I work!');
       }
   });
      $button.appendTo($section);
  });

.CSS：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body{
    background-color: #D7DADB;
    font-family: 'Asar', serif;
    position: relative;
}
/*
  ========================================
  Header
  ========================================
*/
nav{
    display: inline-block;
    height: 28px;
    top: 0px;
    width: 100%;
    position: fixed;
    background-color: #6DBCDB;
    border-bottom: 2px solid #F1433F;
    
}
a,
nav{
    padding: 15px;
    color: #FFFFFF;
}
/*
  ========================================
  Typography
  ========================================
*/
/*
  ========================================
  Button
  ========================================
*/
button{
    width: 300px;
    height: 60px;
    margin: 10px auto 100px auto;
    background-color: #F1433F;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-family: 'Asar', serif;
    font-size: large;
    font-style: oblique;
    font-weight: 700;
    color: #FFFFFF;
}
.tweetButton{
    
}
.search{
    position: relative;
    float: right;
    right: 20px;
    
}
#srchFrm{
    height: 20px;
    width:170px;
    padding-left: 10px; 
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #D7DADB;
    font-family: 'Asar', serif;
}
#srchBtn{
    height: 25px;
    width: 80px;
    position: relative;
    right: 4px;
    border: none;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #F1433F;
    font-family: 'Asar', serif;
    color: #FFFFFF;   
}
/*
  ========================================
  Imgages
  ========================================
*/
#network{
    position: relative;
    height: 60px;
    width: 60px;
    left: 50%;
    transform: translateX(-50%);
    transform: translateY(-70%);
}
/*
  ========================================
  User
  ========================================
*/
aside{
    position: fixed;
    clear: both;
    float: left;
    height: inherit;
    width:300px;
    margin: 0 0 0 10px;
    background: linear-gradient(#2C3E50,#415B75,#6DBCDB, #EEEEEE);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
}
a{
    text-decoration: none;
    margin-bottom: 0;
}
a:hover{
    text-decoration: none;
    background-color: #F1433F; 
}
#user-pic{
    clear:both;
    border-radius: 50%;
    height: 150px;
    width: 150px;
    padding: 20px;
}
#trend{
    color: #FFFFFF;
    text-align: center;
    height: 400px;
    width: 270px;
    margin-top: 15px;
    padding: 15px;
    border-top: 1px solid #F1433F;
}
/*
  ========================================
  Main
  ========================================
*/
.container{
    margin-top: 80px;
}
/*
  ========================================
  Middle Content
  ========================================
*/
section{
    position: relative;
    margin: auto;
    width: 400px;
    z-index: -1;
    
    
}
.main{
    background-color: #D7DADB;
}
/*
  ========================================
  Tweet Box
  ========================================
*/
#tweetImg{
    height: 75px;
    width: 75px;
    border-radius: 5px;
}
.tweet a{
    font-size: large;
    text-decoration: none;
    color: black;
}
.tweet a:hover{
    text-decoration: underline;
    background-color: transparent;
    color: gray;
}
.tweet{
    position: relative;
    width: 450px;
    height: 225px;
    background-color: #FFFFFF;
    border: 4px solid #F1433F;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 15px;
    padding: 25px 15px 0px 15px;
}
.tweetContent{
    width: inherit;
    height: inherit;
    margin: 5px 5px 0 5px;
    border-bottom: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
}
#dT{
    width:inherit;
    position: absolute;
    bottom: 0px;
    border-top: 1px solid gray;
    background-color: #FFFFFF;
    font-size: small;
}

====

============更新==================================

.HTML：

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css" href="twittler.css">
    <link href='https://fonts.googleapis.com/css?family=Asar' rel='stylesheet' type='text/css'>
    <script src="jquery.js"></script>
    <script src="data_generator.js"></script>
  </head>
  <body>
      <header>
          <nav>
              <form class="search">
                  <input type="text" id='srchFrm' placeholder="Search Twittler" required>
                  <input type ="button" value="Search" id="srchBtn">
              </form>
              <h2>
                  <a href="#">HOME</a>
                  <a href="#">NAVIGATION</a>
                  <a href="#">MESSAGES</a>
              </h2>
              <img id='network' src="images/Network.png">
          </nav>
        </header>
      <div class='container'>
          <aside>
              <img id="user-pic" src="images/blank-user.jpg">
              <a href="#">@User_Name</a>
              <div id="trend"><h6>TRENDING</h6></div>
          </aside>
          <section class="main">
          </section>
     </div>
      
    <script>
              *************JQUERY********
    </script>
  </body>
</html>

var $button = $('<button />', {
       type: 'button',
       class:'tweetButton',
       id: 'mT',
       text: 'More Tweets'
   });

$(document).on('click',".tweetButton",function() {
   index = streams.home.length-1;
   newTweets(index);
   alert('I work!');
});

$('.main').on('click', '#mT', function(){
  index = streams.home.length-1;
  newTweets(index);
  alert('I work!');
});

section{
    position: relative;
    margin: auto;
    width: 400px; 
//    z-index: -1; // remove it
}