How Jquery/Javascript behave on dynamic content updation? -


recently assigned task have make jquery method call ajax. when response comes ajax request, put response html code after calling elements parent tr.

in response html have written jquery toggle function slide down information , change text plus minus , vice versa.

but worked weirdly, when added live worked perfectly.

i using jquery 1.7.

here code

this ajax in main page

<script type="text/javascript" >                             $(document).ready(function() {                                   $('.loadcampaign').click(function(e) {                                     //e.preventdefault();                                     var campid = $(this).attr('id');                                     var arr = campid.split('_');                                     campid = arr[1];                                     var parenttrid = '#campaign_tr_' + campid;                                     var cbodyclass = campid + '-cbody';                                     var body = $('.' + 'trview_' + campid);                                      if (body.length) {                                         body.remove();                                     } else {                                         $.ajax({                                             //datatype: "json",                                             url: '{{config.adminurl}}/campaign/loadcamapaigndetails',                                             data: {'id': campid},                                             type: 'get',                                             success: function(jd)                                             {                                                 if (jd !== '0') {                                                     $(parenttrid).after('<tr id="view_content" class="even ' + cbodyclass + ' trview_' + campid + '">' + jd + '</tr>');                                                 } else {                                                     alert('your request can not process! please refresh page , try again')                                                 }                                              }                                         });                                     }                                  });                             });  </script> 

now 1 written in ajax response:

<script type="text/javascript" > function showhidedate(id){     $('#showhidedate_'+id).toggle(function(){         $("#bookeddates_"+id).slidedown(          function(){            $('#showhidedate_'+id).text("-")          }        );    },function(){        $("#bookeddates_"+id).slideup(        function(){            $('#showhidedate_'+id).text("+")        }        );    });      };  $(document).ready(function(){ $('.plus').live('click',function(){         var id=$(this).attr('id');         var idarr=id.split('_');         id=idarr[1];         //alert(id);         showhidedate(id); });   });  </script> 

now not clear when remove live , wirte .click(function() why not working?

i not sound in javasript/jquery

.live() generates called delegate event handler, hooks elements in question + dynamically generated elements after site first loaded. .click() elements there since beginning.

however, .live() deprecated , should use .on() instead.


Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -