Develop Reference

Trigger jQuery After an Ajax Call - Plugin Ajax Layered Navigation - WooCommerce

having searched I have found similar issues but none directly relating to my problem or a solution that works for me. My jQuery Knowledge isn't too strong so it could be something nice and simple.
Here Goes...
• I have a WooCommerce website and have installed the Ajax Layered Navigation Plugin to filter down categories.
• To add specific styling to these I have the following jQuery function to add a class to each li
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
• This works great up until a filter is selected.
• Once the page is reloaded the above classes get removed.
• I have looked to combine a number of different options around ajaxSuccess and ajaxComplete however cannot get the function to re-fire.
What I need to know is how to re-trigger the event above so that each time the page reloads / filters via ajax the appropriate class gets added to that li.
This is the code before Ajax takes place, all li's have the right class
This image shows the Li's after the filter has been clicked
$( document ).ajaxComplete(function( event,request, settings ) {
$( "#products" ).append( "<li>Request Complete.</li>" );
});
$( document ).ajaxSuccess(function() {
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
});
$(document).ajaxSuccess(function(){
alert("AJAX request successfully completed");
});
Many Thanks in advance for any Help!

Have you tried setting a timeout after ajax complete?
$( document ).ajaxComplete(function() {
setTimeout(function(){
alert("Ajax done");
$('.checkboxes li').each(function(){
$(this).addClass("filter_" + $(this).text());
});
}, 500);
});

jQuery hide element after append using jquery.validate

I am having trouble hiding an element after appending it to a div. I have tried everything and looked all over for an answer. I spent almost the whole day on it.
So I use jquery.validate.js to make a custom error code
email: '<img id="img1" class="RCB" src="images/closeButton.png" /><h3>Incorrect Email</h3><p>Please enter a valid email address</p>'
which is then appended to my far right div #rightBar
errorClass: "rightNotification",
errorElement: "div",
errorPlacement: function(error, element) {
error.appendTo("#rightBar");
},
and then in a seperate js file I try to fade() it when the close button at the top is clicked
$(document).ready(function() {
$(".RCB").live("click", function() {
$('.rightNotification').hide();
});
});
I have also tried
$(document).ready(function() {
$(".RCB").click(function() {
$('.rightNotification').hide();
});
});
and a number of other solutions. I basically want the right close button (RCB) to close the entire notification. I can't really think of anything I haven't tried but I'm hoping you can think of something.
Cheers,
Matt
Any help would be greatly appreciated!

You'll need to use event delegation as it is added dynamically - live() was deprecated in version 1.7 and removed in version 1.9:
$(document).on("click", ".RCB", function() {
$('.rightNotification').hide();
});
Substitute document for a closer container element if possible (for added efficiency).

jQuery only possible to execute once per page load

My jQuery script is a popup window to my website when you click a button.
The buttons are in table, in a foreach loop. Things works just fine there.
The problem is, if i click product 1, the popup window works as it should, but when i close the window and try to popup it again, it not works. It will work again if refresh the page. It seems to work only once per button, then i need to refresh page..
The jQuery script is here:
;
(function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').bind('click', function(e){
var $tr = $(e.currentTarget).closest('tr'),
$content = $tr.find('#wiki-content');
$content.bPopup();
});
});
})(jQuery);
Thanks in advance :)
EDIT:
Thanks a lot for all answers. The rest of code can you look at this pastebin code!
Pastebin

use following
$(document).on('click','.wiki-button', function(e){

I think you are repeating the id wiki-content
Sorry to add as answer.

trouble using this script to make the button close by clicking outside

I'm trying to use the following script to make the button close its menu by clicking outside of it.
$(document).ready( function(){
$('#trigger').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});});
You can see the demo ([Ideal Fiddle])(http://jsfiddle.net/craigmdennis/H2Chj/2/)
But my button ([Problematic Fiddle]) (http://jsfiddle.net/xJ9ug/) isn't working that well. It takes a few clicks to open the menu. Would you please tell me what's wrong with the css or the script? Any help is much appreciated.

Check out this fiddle. All you need is a simple condition check to make this work.
if ($('#dropdown').has(e.target).length === 0)

actually your code is correct .. the reason why it is not working is it have <input type="checkbox" /> inside a span and click event is being added for span. I don't know the exact reason why checkbox is not let the event propogate but removing the checkbox works like a charm..
and yea one more thing you haven't closed first span tag properly.
working demo without checkbox HERE
use addClass() and removeClass() to acheive the effect you demo had.
thanks

Add .dropdown_content li a,its working now..
$(document).ready( function(){
$('.dropdown').click( function(event){
event.stopPropagation();
$('.dropdown_content li a').toggle();
});
});

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.

Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here

.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.

You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers

Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});