Кнопка JQuery не регистрируется

Я создал сайт mock twitter, который должен генерировать больше твитов после нажатия кнопки. Я создал кнопку, которая добавляется в основную часть сайта, но кажется, что после ее щелчка абсолютно ничего не происходит. Я смотрел это снова и снова, убедившись, что мой код верен, но я боюсь, что я просто что-то упустил. ниже - мой JQuery и CSS.Кнопка JQuery не регистрируется

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; 
 
}

=============== UPDATE ====== ======================

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>

источник

2016-02-23 DLF85

почему бы вам не использовать 'on' – shu

Я не могу увидеть любую кнопку в вашем фрагменте кода? Я что-то упускаю ? –

Это в самом низу части кода JQuery. – DLF85

Измените часть создания кнопки для этого

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

Вот fiddle, который демонстрирует пример

источник

2016-02-23 05:57:27

Это не работает, потому что он не генерирует кнопку динамически. – DLF85

Это необходимо использовать после создания кнопки, удалить событие клика из части динамической генерации и добавить это. –

Это близко, кажется, но ничего не происходит, когда нажимается кнопка ... – DLF85

Попробуйте

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

источник

2016-02-23 05:55:41

Это ничего не производит. В исходном коде, который я опубликовал, все генерируется внутри кнопки (класс, id и

Просто удалить z-index: -1; из section затем кликните на кнопку для вас работу.

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

Working Fiddle

источник

2016-02-23 06:43:31 ketan

Это показывает, что кнопка нажимается, но ничего не происходит ... – DLF85

@ DLF85 check in fiddle link. Он отображает предупреждающее сообщение. – ketan

Кнопка JQuery не регистрируется

ответ

Смежные вопросы