0

I have a pretty complex system with a few AJAX calls which render different templates into other templates in PHP.

One of these templates is a edit form for my entity. This form is rendered hidden into my website until a button was clicked, which will then fire a jQuery toggle() to switch out a part of my site for this edit form.

This works fine until the user is using the jQuery UI slider on my site.

What happens if the user navigates within the slider is that parts of my site will be reloaded with AJAX.

When the button for the toggle() then will be clicked the animation goes of as often as the slider was used (so if the slider was used 4 times the toggle will animate an switch out the 2 elements 4 times).

I debugged through it and couldn't find the mistake, i can't provide a jsFiddle which could rebuild the situation nor can i give access to the site. The click function will be fired only once, so i really can't explain why this is happening.

To mention is that i have 3 buttons which will trigger this event:

#poi_edit_ajax will be shown when the slider was used in the template which will be rendered per AJAX.

#poi_edit_first will be shown by first access to the site and nothing has been reloaded per AJAX.

#poi_edit_last will be shown so the user can come back from the edit view

The Javascript is the following:

$("#poi_edit_ajax").click(function(){
    $(".toggle_edit").toggle('slow');
});

$("#poi_edit_first").click(function(){
    $(".toggle_edit").toggle('slow');
});

$("#poi_edit_last").click(function(){
    $(".toggle_edit").toggle('slow');
});

I don't think that somebody can give me a solution with just this information, but that's everything i can provide now, so my Question now is simply if it is possible to tell the toggle() function from jQuery to only run the animation ONCE PER CLICK.

I don't think that jQuery one() can be used for this, because so the click event could only be used once per pagevisit.

EDIT

According to the comment, i tried out if multiple event handlers will be registered within the AJAX calls, which is true.

The code to fix this is simple:

$("#comment_first").unbind("click").click(function(){
    $('.toggle_information').toggle('slow');
});

$("#comment_last").unbind("click").click(function(){
    $('.toggle_information').toggle('slow');
});

$("#comment_ajax").unbind("click").click(function(){
    $('.toggle_information').toggle('slow');
});

I just need to unbind the Lister before bind it again, else they're gonna stuck and multiple Listeners will react to the click event!

KhorneHoly
  • 4,666
  • 6
  • 43
  • 75
  • 1
    You are probably binding the Click event multiple times (by loading javascript through the AJAX calls). Make sure you bind the Click handler (which triggers the `toggle()`) only once. Take a look at this answer: http://stackoverflow.com/a/969011 – Doku-so Jun 26 '14 at 09:37
  • It seems to be this problem, i'm logging a string into the console and the amount of logs is the same as the amount of the usage from the slider. But i can't really fix it, i update my Question, can you help me? – KhorneHoly Jun 26 '14 at 10:25
  • I fixed it, thanks @Doku-so! If you want to answer the Question i'll thankfully accept it! :) – KhorneHoly Jun 26 '14 at 11:06

1 Answers1

1

You are probably binding the Click event multiple times (by loading javascript through the AJAX calls). Make sure you bind the Click handler (which triggers the toggle()) only once.

Take a look at this answer: https://stackoverflow.com/a/969011

A (slightly modified) quote from that answer, for quick reference:

function alertEvent() { alert("test"); }

$(".ajax").bind("click", alertEvent);

//When you want to ensure it won't happen twice...

$(".ajax").unbind("click", alertEvent);

$(".ajax").bind("click", alertEvent);

This method will only remove the event you specify

Community
  • 1
  • 1
Doku-so
  • 346
  • 3
  • 9
  • Thanks for that! :) Searched for hours to find this error, i fixed it with the following line: `$("#comment_first").unbind("click").click(function(){ $('.toggle_information').toggle('slow'); });` – KhorneHoly Jun 26 '14 at 11:50