html - Applying jQuery code to AJAX loaded content -

-

i have these html lines

<h1 class="trigger">headline one</h1> <div class="toggle_container">     body text 1 </div>

and jquery code in <head> section of site

$(document).ready( function() {     $('.trigger').not('.trigger_active').next('.toggle_container').hide();     $('.trigger').click( function() {         var trig = $(this);         if ( trig.hasclass('trigger_active') ) {             trig.next('.toggle_container').slidetoggle('slow');             trig.removeclass('trigger_active');         } else {             $('.trigger_active').next('.toggle_container').slidetoggle('slow');             $('.trigger_active').removeclass('trigger_active');             trig.next('.toggle_container').slidetoggle('slow');             trig.addclass('trigger_active');         };         return false;     }); });

after page loaded , jquery code applied, html output looks this:

<h1 class="trigger">headline one</h1> <div class="toggle_container" style="display: none;">      body text 1 </div>

so far works fine. here comes problem: when i'm loading new html block ajax - looks this:

<h1 class="trigger">headline two</h1> <div class="toggle_container">     body text 2 </div>

... doesn't rendered above jquery code. how can apply jquery code new loaded html block?

edit: here's ajax

jquery(document).ready(function($) {      // number of next page load (/page/x/).     var pagenum = parseint(pbd_alp.startpage) + 1;      // maximum number of pages current query can return.     var max = parseint(pbd_alp.maxpages);      // link of next page of posts.     var nextlink = pbd_alp.nextlink;      /**      * replace traditional navigation our own,      * if there @ least 1 page of new posts load.      */     if(pagenum <= max) {         // insert "more posts" link.         $('#content')             .append('<div class="pbd-alp-placeholder-'+ pagenum +'"></div>')             .append('<p id="pbd-alp-load-posts"><a href="#">↓ archive</a></p>');          // remove traditional navigation.         $('.navigation').remove();     }       /**      * load new posts when link clicked.      */     $('#pbd-alp-load-posts a').click(function() {            // there more posts load?         if(pagenum <= max) {              // show we're working.             $(this).text('...');              $('.pbd-alp-placeholder-'+ pagenum).load(nextlink + ' .post',                 function() {                     // update page number , nextlink.                     pagenum++;                     nextlink = nextlink.replace(/\/page\/[0-9]?/, '/page/'+ pagenum);                      // add new placeholder, when user clicks again.                     $('#pbd-alp-load-posts')                         .before('<div class="pbd-alp-placeholder-'+ pagenum +'"></div>')                      // update button message.                     if(pagenum <= max) {                         $('#pbd-alp-load-posts a').text('older entries');                     } else {                         $('#pbd-alp-load-posts a').text('all items loaded.');                     }                 }             );         } else {             $('#pbd-alp-load-posts a').append('.');         }             return false;     }); });

after ajax content appended dom want run following piece of code again:

$('.trigger').not('.trigger_active').next('.toggle_container').hide();

then want make sure use event delegation clicking work on dynamically inserted content:

$(document).on('click', '.trigger', function() {     //the rest of code });

Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more