0

I've got a wordpress site under my novice care (I'm an intern) and was asked to implement and a button that toggles a form. So I went digging. I found this tutorial http://www.davidtiong.com/create-toggle-shortcode-for-wordpress-using-jquery/

and used it to implement this --> http://www.hardwareclub.co/community/ The button, "request more info", works as it's supposed to when you go to the link as I just directed you to.

BUT if you get there from hardwareclub.co by using the top navigation menu the button no longer works.

What gives?

The same question can be asked about the hardwareclub.co/scale page.

jQuery(function($){
         $(".toggle_container").hide();
$(document).on('click', "h3.trigger", function () {
     $(this).toggleClass("active").next().slideToggle("normal");
     return false; //Prevent the browser jump to the link anchor
});
});
BuddyB
  • 11
  • 6

1 Answers1

0

I am not sure how familiar you are with Ajax and JQuery but basically when you click your menu links you are loading the page with Ajax and its preventing your JQuery to run. See this SO answer here. Here is a quote from that answer.

When you do an AJAX call, and replace a section of your page, you're removing those elements with the event handlers bound to them and replacing them with new elements. Even if those elements would now match that selector they don't get the event handler bound because the code to do that has already executed.

I believe you are having the same issue going on here which is why it works when the page is loaded normally but doesnt work when its loaded via Ajax.

You will need to set your JQuery click event for your form to use something like: 

$(document).on('click', ".your-form-class", function () {
...
});

I dont know enough of your JQuery (since you didnt post any code) but im sure thats pretty much whats going on.

Community
  • 1
  • 1
crazymatt
  • 3,266
  • 1
  • 25
  • 41