jquery - Existing functionality not working after dynamically loading the same dom element -

-

i have multiple rows, inside rows there functionality increase decrease values, checkbox, price etc..based on price sorting rows. generating after creating row internal functionality not working.

html code(clicking on private):

var categorysort = ["0 - 25", "25 - 50", "50 - 150", "150 , over"];
/images/up_arrow.png"> category

jquery code:

/* sort by:- private start */    $('.sort-by .private').on('click', function(){     var items = $(".rendereditem");     var privatestatus = "private";     $(".categorystatus").html("");           if(privatestatus = "private"){         var itemmaindiv = "<div style='' aria-expanded='true' id='categorylist0' class='panel-collapse collapse privatediv' />" ;     }     var collapsiblepanel = $( "<div class='collapsiblepanel collapsibleparentdiv' style='display:none'/>" ).append(         $( "<div class='panel panel-default' />" ).append(             $( "<div class='panel-heading' />").append(                 $('<div class="panel-title" />').append(                     $('<div class="pull-left categoryblock" />').append(                         $('<span class="categorytext" />').text(privatestatus),                         $('<span class="link visible-xs">').append(                             $('<a href="#" />').text('view checklist')                         )                                                    ),                     $('<span class="collapseexpand pull-right">').append(                         $('<a class="collapsed" data-target="#categorylist0" data-toggle="collapse" href="#" aria-expanded="true"/>')                     )                 )             ),             $(itemmaindiv)         )     );     $(".categorystatus").append(collapsiblepanel);        items.each(function(index) {         item = $(this);         itemtype = item.attr("itemtype");          if(itemtype == "private") {             $(".privatediv").append(item);                       }     });           var collpnldivs = $('.collapsiblepanel');      collpnldivs.each(function( index ) {         if($(this).find('.rendereditem').length > 0){                        $(this).show();         }                });      });  /* sort by:- private end */

this because when dynamically load content, inserting page after have installed event handlers. thus, there no event handlers on dynamic content.

the usual solutions to:

  1. install event handlers after load dynamic content.

or

  1. switch delegated event handling work dynamically created content.

in delegated event handling, bind event parent exists @ time install event handlers (even though child content not yet exist) , use event bubbling see events happen in child objects later dynamically loaded. jquery makes quite easy if use correct form of .on().

you can read more delegated event handling in these references:

jquery .live() vs .on() method adding click event after loading dynamic html

does jquery.on() work elements added after event handler created?

jquery event handlers - what's "best" method


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more