javascript - Change is not made onclick event on the data loaded dynamically -


this code load data dynamically php file :

 $(document).ready(function(){             function loading_show(){                 $('#loading').html("<img src='demo/img/ajax-loader.gif'/>").fadein('fast');             }             function loading_hide(){                 $('#loading').fadeout('fast');             }                             function loaddata(page){                 loading_show();                                     $.ajax                 ({                     type: "post",                     url: "pagination/load_data.php",                     data: "page="+page,                     success: function(msg)                     {                         $("#container2").ajaxcomplete(function(event, request, settings)                         {                             loading_hide();                             $("#container2").html(msg);                         });                     }                 });             }             loaddata(1);  // first time page load default results             $('#container2 .pagination li.active').live('click',function(){                 var page = $(this).attr('p');                 loaddata(page);              });                        $('#go_btn').live('click',function(){                 var page = parseint($('.goto').val());                 var no_of_pages = parseint($('.total').attr('a'));                 if(page != 0 && page <= no_of_pages){                     loaddata(page);                 }else{                     alert('enter page between 1 , '+no_of_pages);                     $('.goto').val("").focus();                     return false;                 }              }); }); 

this code running , output given. want add onclick event on data loaded dynamically , code :

function  favourites(gymusernamefav){                          $("#container2 .shortlisted").html("hello");                      $.ajax                 ({                     type: "post",                     url: "http://fvilla.in/markfavourite.php",                     data: 'gymusernamefav='+ gymusernamefav,                     success: function(html)                     {                         $("#container2").ajaxcomplete(function(event, request, settings)                         {                              $("#container2 .shortlisted").html("hello");                         });                     }                 });               }    $('#container2 .shortlisted').live('click',function(){                 var gymusernamefav =  $(this).attr("id");                 favourites(gymusernamefav);                 return false;             });            

this code running change not made in

$("#container2 .shortlisted").html("hello");  

after onclick no change made class .shortlisted ( change made seconds , after old text seen) ajax part running , query executed.

apreciate help.

use event delegation dynamically loaded , generated elements:

$(document).on('click','#container2 .shortlisted', function(){        favourites($(this).attr("id"));        return false;  });            

Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -