jQuery按钮单击不注册

Question

我创建了一个模拟Twitter网站，一旦单击按钮，该网站应该会生成更多推文。 我已经创建了一个按钮，该按钮附加到了网站的主要部分，但是似乎单击该按钮绝对不会发生任何事情。 我反复检查了一下，以确保我的代码正确无误，但恐怕我只是缺少了一些东西。 下面是我的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> 

Answer 1

尝试

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

Answer 2

将按钮创建部分更改为此

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!');
});

这是一个小提琴 ，演示了这个例子

Answer 3

只需删除z-index: -1; 从section然后单击按钮为您工作。

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

工作小提琴