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
Post a Comment