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.


Comments

Post a Comment

Popular posts from this blog

html5 - What is breaking my page when printing? -

-
Image
i have questioner , don't know why when printing it's creating break before first question. live demo (link) i able resolve issue removing fieldset container had wrapped in.. having fieldset element causing of fields grouped together, , since not fit on first page, being pushed second page. removing fieldset element, able firefox print first 2 questions on page 1 identically chrome. it seems not new problem firefox , fieldset not playing nice found old bugzilla ticket 2008 has persisted , still being commented on in 2014 (link) if retaining fieldset important, found solution else came here (link) <script type='text/javascript'> $(window).bind('beforeprint', function(){ $('fieldset').each( function(item) { $(this).replacewith($('<div class="fieldset">' + this.innerhtml + '</div>')); } ) }); $(window).bind(
Read more

c# - must be a non-abstract type with a public parameterless constructor in redis -

-
when save object, got below error must non-abstract type public parameterless constructor in order use parameter 't' in generic type or method 'servicestack.redis.redisclient.store<t>(t) redisclass.getinstnace().store(msg); // error here redisclass.getinstnace().save(); as third party's class, can not edit how save object? could create wrapper around third party object call constructor, store wrapper? e.g. public class mywrapper { public thirdpartyobject thirdpartyinstance { get; set; } public mywrapper() { thirdpartyinstance = new thirdpartyobject("constructors"); } }
Read more

ajax - PHP/JSON Login script (Twitter style) not setting sessions -

-
i'm having trouble getting twitter style login work properly, reason gets stuck at session_register("useremail"); session_register("userpass"); and doesn't redirect after it. if enter wrong account data, works , appropriate error message pops up. this full code: <?php if(empty($_post['email']) || empty($_post['password'])) { die(msg(0,"all fields required")); } if(!(preg_match("/^[\.a-z0-9_\-\+]+[@][a-z0-9_\-]+([.][a-z0-9_\-]+)+[a-z]{1,4}$/", $_post['email']))) die(msg(0,"you haven't provided valid e-mail")); $host="localhost"; $username="root"; $password="x"; $db_name="x"; $tbl_name="x"; mysql_connect("$host", "$username", "$password")or die("cannot connect"); mysql_select_db("$db_name")or die("cannot select db"); $useremail=$_post['email']; $userpass=
Read more