JQuery button click not registering

<p>I have created a mock twitter website that is supposed to generate more tweets once a button is clicked. I have created the button which is appended to the main section of the site but it seems that once it is clicked absolutely nothing happens. I have looked this over and over again making sure that my code is correct but I am afraid that I am just missing something. below is a my JQuery and CSS.</p><p>JQuery:</p><pre><br /><code> $(document).ready(function(){<br /> var $body = $('body');<br /> var $section = $('.main');<br /><br /> $section.html('');<br /><br /> //Returns a div with a time stamp for the tweet<br /> var createdTime = function(tweet){<br /><br /> return $('<div>', {text: tweet.created_at, id: 'dT'}).prop('outerHTML');<br /><br /> };<br /> //Returns the @handle as a link of the user who tweeted<br /> var userName = function(tweet){<br /> return $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML') + '<br />' + '@' + tweet.user; <br /> };<br /><br /> // simply returns the users tweeted message<br /> var tweetContent = function(tweet){<br /> return tweet.message;<br /> };<br /><br /> var index = streams.home.length - 1;<br /> // A function that generates new tweets<br /> var newTweets = function(index){<br /> while(index >= 0){<br /> var tweet = streams.home[index];<br /> var $tweet = $('<div class=tweet></div>');<br /> //call to outside function to populate tweets<br /> $tweet.html(userName(tweet) + ': ' + tweetContent(tweet) + createdTime(tweet));<br /> $tweet.appendTo($section);<br /> index -= 1;<br /><br /> }<br /> }<br /> newTweets(index);<br /> //Adds a user image to tweet <br /> $('.tweet').prepend('<img id=tweetImg src=images/blank-user.jpg />');<br /><br /> //button created to generate more tweets after page has loaded<br /> var $button = $('<button />', {<br /> type: 'button',<br /> 'class':'tweetButton',<br /> id: 'mT',<br /> text: 'More Tweets',<br /> click: function(){<br /> index = streams.home.length-1;<br /> newTweets(index);<br /> alert('I work!');<br /> }<br /> });<br /> $button.appendTo($section);<br /><br /> });<br /></code><br /></pre><p>CSS:</p><div class="snippet" data-lang="js" data-hide="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"><br /><code>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 {<br /> margin: 0;<br /> padding: 0;<br /> border: 0;<br /> outline: 0;<br /> font-size: 100%;<br /> vertical-align: baseline;<br /> background: transparent;<br />}<br /><br />body{<br /> background-color: #D7DADB;<br /> font-family: 'Asar', serif;<br /> position: relative;<br />}<br /><br />/*<br /> ========================================<br /> Header<br /> ========================================<br />*/<br />nav{<br /> display: inline-block;<br /> height: 28px;<br /> top: 0px;<br /> width: 100%;<br /> position: fixed;<br /> background-color: #6DBCDB;<br /> border-bottom: 2px solid #F1433F;<br /> <br />}<br />a,<br />nav{<br /> padding: 15px;<br /> color: #FFFFFF;<br />}<br /><br />/*<br /> ========================================<br /> Typography<br /> ========================================<br />*/<br /><br />/*<br /> ========================================<br /> Button<br /> ========================================<br />*/<br />button{<br /> width: 300px;<br /> height: 60px;<br /> margin: 10px auto 100px auto;<br /> background-color: #F1433F;<br /> border: none;<br /> border-bottom-left-radius: 10px;<br /> border-bottom-right-radius: 10px;<br /> font-family: 'Asar', serif;<br /> font-size: large;<br /> font-style: oblique;<br /> font-weight: 700;<br /> color: #FFFFFF;<br />}<br />.tweetButton{<br /> <br />}<br />.search{<br /> position: relative;<br /> float: right;<br /> right: 20px;<br /> <br />}<br />#srchFrm{<br /> height: 20px;<br /> width:170px;<br /> padding-left: 10px; <br /> border-top-left-radius: 20px;<br /> border-bottom-left-radius: 20px;<br /> background-color: #D7DADB;<br /> font-family: 'Asar', serif;<br />}<br /><br />#srchBtn{<br /> height: 25px;<br /> width: 80px;<br /> position: relative;<br /> right: 4px;<br /> border: none;<br /> border-bottom-right-radius: 30px;<br /> border-top-right-radius: 30px;<br /> background-color: #F1433F;<br /> font-family: 'Asar', serif;<br /> color: #FFFFFF; <br />}<br /><br />/*<br /> ========================================<br /> Imgages<br /> ========================================<br />*/<br />#network{<br /> position: relative;<br /> height: 60px;<br /> width: 60px;<br /> left: 50%;<br /> transform: translateX(-50%);<br /> transform: translateY(-70%);<br />}<br /><br /><br />/*<br /> ========================================<br /> User<br /> ========================================<br />*/<br /><br />aside{<br /> position: fixed;<br /> clear: both;<br /> float: left;<br /> height: inherit;<br /> width:300px;<br /> margin: 0 0 0 10px;<br /> background: linear-gradient(#2C3E50,#415B75,#6DBCDB, #EEEEEE);<br /> border-top-left-radius: 6px;<br /> border-top-right-radius: 6px;<br /> text-align: center;<br />}<br />a{<br /> text-decoration: none;<br /> margin-bottom: 0;<br />}<br />a:hover{<br /> text-decoration: none;<br /> background-color: #F1433F; <br />}<br />#user-pic{<br /> clear:both;<br /> border-radius: 50%;<br /> height: 150px;<br /> width: 150px;<br /> padding: 20px;<br />}<br />#trend{<br /> color: #FFFFFF;<br /> text-align: center;<br /> height: 400px;<br /> width: 270px;<br /> margin-top: 15px;<br /> padding: 15px;<br /> border-top: 1px solid #F1433F;<br />}<br />/*<br /> ========================================<br /> Main<br /> ========================================<br />*/<br />.container{<br /> margin-top: 80px;<br />}<br /><br />/*<br /> ========================================<br /> Middle Content<br /> ========================================<br />*/<br /><br />section{<br /> position: relative;<br /> margin: auto;<br /> width: 400px;<br /> z-index: -1;<br /> <br /> <br />}<br />.main{<br /> background-color: #D7DADB;<br />}<br />/*<br /> ========================================<br /> Tweet Box<br /> ========================================<br />*/<br />#tweetImg{<br /> height: 75px;<br /> width: 75px;<br /> border-radius: 5px;<br />}<br />.tweet a{<br /> font-size: large;<br /> text-decoration: none;<br /> color: black;<br />}<br />.tweet a:hover{<br /> text-decoration: underline;<br /> background-color: transparent;<br /> color: gray;<br />}<br />.tweet{<br /> position: relative;<br /> width: 450px;<br /> height: 225px;<br /> background-color: #FFFFFF;<br /> border: 4px solid #F1433F;<br /> border-top-left-radius: 20px;<br /> border-bottom-right-radius: 20px;<br /> margin-bottom: 15px;<br /> padding: 25px 15px 0px 15px;<br />}<br />.tweetContent{<br /> width: inherit;<br /> height: inherit;<br /> margin: 5px 5px 0 5px;<br /> border-bottom: 1px solid #EEEEEE;<br /> border-top: 1px solid #EEEEEE;<br />}<br /><br />#dT{<br /> width:inherit;<br /> position: absolute;<br /> bottom: 0px;<br /> border-top: 1px solid gray;<br /> background-color: #FFFFFF;<br /> font-size: small;<br />}</code><br /></pre></div></div><br /><h2>Click here view more answers <a href="http://ift.tt/1VAVi7c">http://ift.tt/1VAVi7c</a></h2>