I have a function that is working correctly on page load:
$(window).on("load", function() {
OnloadFunction();
});
Although when I rerun the query via ajax and load in the new content, OnloadFunction does not work.
$('.submenu li').click(function(e) {
e.preventDefault();
var sortSelect = $(this).find('div').text();
var categorySelect = $(this).parent().attr('class').replace('submenu ', '');
$('.all-songs').html('<h2 class="result">Loading...</h2>');
$.ajax({
type: 'post',
dataType: 'text',
url: sortAjax.ajaxurl,
data: {
action: 'my_ajax_sort',
categorySelect: categorySelect,
sortSelect: sortSelect
},
success: function(response) {
$('.all-songs').html(response);
}
})
});
$(window).on("load", function() {
OnloadFunction();
$(document).ajaxComplete(function() {
OnloadFunction();
});
});
or
$(document).ready(function() {
$(document).ajaxComplete(function() {
OnloadFunction();
});
});
ajax updated Html is here:
$(document).ready(function(){
$(document).ajaxComplete(function(){
xxxxxx
});
});
Here is the function that needs to run:
function OnloadFunction () {
$('.sc-trackslist li').each(function() {
var trackNum = $(this).index();
var top = trackNum * 50 + trackNum * 1;
$(this).css('top', top);
});
$('.sc-trackslist > li').click(function () {
if ($('.sc-play').hasClass('clicked') || $('.sc-pause').hasClass('clicked')) {
} else {
$('.sc-play').addClass('hidden');
$('.sc-pause').removeClass('hidden');
$('.sc-player .sc-info, .sc-player .sc-scrubber, .sc-player .sc-controls').slideDown(200);
$('#footer').css('margin-bottom', '90px');
}
});
$('.sc-trackslist > li').hover(function() {
var trackNum = $(this).index() + 1;
$('.song:nth-of-type('+trackNum+')').addClass('hover');
}, function() {
var trackNum = $(this).index() + 1;
$('.song:nth-of-type('+trackNum+')').removeClass('hover');
});
}
Any suggestions welcome, thanks for your response!
2
Answers
Found a resolution to this - the function needed to be run after the other code in the ajaxComplete rather than in a separate ajaxComplete function
According to your comment:
Therefore, I instead suggest placing the calling of
OnloadFunction()
in thesuccess
callback of your AJAX request after the html has been updated like so: