jQuery - How to make .on event work for dynamically created HTML? -

reading on new specs newest jquery 1.x library, says use .on attach events work dynamically created jquery elements, however, can't seem work @ all. in $(document).ready function have following:

jquery:

$(".dropdown").on("click", function(event) {     event.preventdefault();     var type = $(this).text() == '[ read more... ]' ? 'expand' : 'collapse';     var thediv = type == 'expand' ? $(this).parent().next("div") : $(this).parent().prev("div");     var theid = $(this).attr("id");     $(this).parent().remove();     var vtext = theid == 'reqmat' ? 'every candidate required submit headshot , candidate statement.' : 'to strengthen candidacy , let people know you\'re about, invite create campaign video.';      thediv.animate({height: 'toggle'}, 500, function(){         if (type == 'expand')             thediv.after('<p class="desc"><a href="#" class="dropdown" id="' + theid + '">[ collapse information... ]</a></p>');         else             thediv.before('<p class="desc">' + vtext + ' <a href="#" class="dropdown" id="' + theid + '">[ read more... ]</p>');          if (theid == 'optmat' && type == 'expand')         {             var svidwidth = $("#samplevideo").width();             $("#samplevideo").css({'height': (svidwidth/1.5) + 'px'});         }         else if (theid == 'optmat' && type == 'collapse')         {             var iframe = $('#samplevideo')[0];             var player = $f(iframe);             player.api('pause');         }          if (theid == 'reqmat' && type == 'expand')         {             handlebullets();         }     }); }); 

ok, drop down [ read more... ] text , turn [ collapse information... ] string go underneath of actual content being expanded. when click on [ collapse information... ] text, doesn't collapse anything, instead goes top of page, having href="#", using .on should prevent happening when event.preventdefault(); applied correct??

am using jquery library found here: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

my html laid out so, if matters:

<h4>header 1</h4> <p class="desc">brief description. <a href="#" id="reqmat" class="dropdown">[ read more... ]</a></p> <div style="display: none;">     <p>more information in here...</p> </div> <h4>header 2</h4> <p class="desc">brief description. <a href="#" id="optmat" class="dropdown">[ read more... ]</a></p> <div style="display: none;">     <p>more information in here...</p> </div> 

the first time click it, works, 2nd time, when [ collapse information... ] shown doesn't work @ all. not attaching dynamically created <p class="desc"><a href="#" class="dropdown" id="' + theid + '">[ collapse information... ]</a></p>.

why not? there else should using instead of .on? know .live no longer used since jquery 1.7. .click not work either have tried well. other options there?

to on method register delegate event handler (just delegate method does), need specify selector element, , apply element exist.

for example:

$("body").on("click", ".dropdown", function(event) { 

preferably, should apply parent element close possible dynamically added elements rather "body", reduce scope as possible. otherwise selector ".dropdown" needs evaluated every click happens in page. typically use containing element add dynamic content to.