This is the code to load data dynamically from a 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); // For 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 a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
}); });
This code is running successfully and the output is given. Now i want to add an onclick event on the data loaded dynamically and code for this is :
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 is also running successfully but the change is not made in
$("#container2 .shortlisted").html("hello");
After onClick no change is made into the class .shortlisted ( Change is only made for some seconds and after that the old text is seen) But the ajax part is running successfully and the query is also executed.
Apreciate any help.
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
You should use event delegation on() instead of deprecated method live() when you deal with fresh DOM (added dynamically by js) :
$('body').on('click','#container2 .shortlisted', function(){
Hope this helps.
Please try this
$(document).delegate("#container2 .shortlisted", "click", function() {
var gymusernamefav = $(this).attr("id");
favourites(gymusernamefav);
return false;
});
The delegate() method attaches one or more event handlers for specified elements that are children of selected elements, and specifies a function to run when the events occur. Event handlers attached using the delegate() method will work for both current and FUTURE elements (like a new element created by a script).
As of jQuery version 1.7, the on() method is the preferred method for attaching event handlers for selected elements.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
For newly created elements you can use:
$(document).on('click', '#container2 .shortlisted', function(){
.............. your code .......
});
In previous jQuery version (1.7) you could use the live()
Try to change your selector from:
$("#container2 .shortlisted")
To:
$("#container2.shortlisted")
No spaces between the two elements in the selector otherwise you are looking for children of container2 with class shortlisted.
Use event delegation for dynamically loaded and generated elements:
$(document).on('click','#container2 .shortlisted', function(){
favourites($(this).attr("id"));
return false;
});