I'm experiencing issues with an ajax loader in Wordpress.
The theme I am using has an ajax loader button that is interfering with my inline script.
Despite reading over 10 articles on the problem, I haven't been able to find a solution yet.
Does anyone have any suggestions for resolving this issue?
Here is the javascript code I've been working with:
if (typeof(localStorage) == 'undefined') {
document.getElementById("warning").innerHTML =
'Browser not supported Storage...';
} else {
$('.item').each(function() {
var div = $(this).closest(".item").attr("id");
if (localStorage["Catalin-" + div] == 1) {
$(this).addClass('selected');
}
});
$(document).ready(function() {
$('.buton').on('click', function() {
var div1 = $(this).closest(".item").attr("id");
var $oku_kontrol = $(this).closest('.item');
$oku_kontrol.toggleClass('selected');
if ($oku_kontrol.hasClass('selected')) {
localStorage.setItem("Catalin-" + div1, 1);
}
else {
localStorage.setItem("Catalin-" + div1, 0);
}
});
});
} .item {
width:200px;
height:80px;
border:1px solid red;
}
.selected {
background-color:yellow;
}
.buton:after {
color:white;
display:inline-block;
padding:6px;
background:green;
content:"Click Me!";
}
.selected .buton:after {
background:black;
content:"You already did ;)";
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="1" class="item">1<br>
<a class="buton"></a>
</div>
<div id="2" class="item">2<br>
<a class="buton"></a>
</div>
<div id="3" class="item">3<br>
<a class="buton"></a>
</div>
<div id="warning"></div>This code works across the entire website. However, when the page loads content within the same div using an ajax loader, the code stops functioning without any console errors and the click function ceases to work as well.
Any assistance would be greatly appreciated.
Here is the ajax loader javascript code I am currently using:
$('.pager_load_more').click(function(e){
e.preventDefault();
var el = $(this);
var pager = el.closest('.pager_lm');
var href = el.attr('href');
// index | for many items on the page
var index = $('.lm_wrapper').index(el.closest('.isotope_wrapper').find('.lm_wrapper'));
el.fadeOut(50);
pager.addClass('loading');
$.get( href, function(data){
// content
var content = $('.lm_wrapper:eq('+ index +')', data).wrapInner('').html();
if( $('.lm_wrapper:eq('+ index +')').hasClass('isotope') ){
// isotope
$('.lm_wrapper:eq('+ index +')').append( $(content) ).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
} else {
// default
$( content ).hide().appendTo('.lm_wrapper:eq('+ index +')').fadeIn(1000);
}
// next page link
href = $( '.pager_load_more:eq('+ index +')', data ).attr('href');
pager.removeClass('loading');
if( href ){
el.fadeIn();
el.attr( 'href', href );
}
// refresh some staff -------------------------------
mfn_greyscale();
mfn_jPlayer();
mfn_pretty();
// isotope fix: second resize
setTimeout(function(){
$('.lm_wrapper.isotope').isotope( 'layout');
},1000);
});
});