SlideDown then call custom function

Question

Hi,

Having difficulty understanding why my function is being called twice.

I'm trying to detect when a radio button is called (intRev_yes), check if a div is empty, slide down another div and then call a custome function which dynamically creates a date field.

if(this.id=="intRev_yes"){
 if($('div#mainField').is(':empty')){
  $('.intRevSections').slideDown('slow',function(){
   current=-1;
   addIrField();
  });
 }   
}

When I alert out at each stage, after getting to the end (i.e. addIrField()), the script seems to go back to the slideDown() section and recalls addIrField(). I can't understand why, there are no loops. current is used as an index for the date field.

Answer 1

You are probably calling this from a Dom event that bubbles. See http://en.wikipedia.org/wiki/DOM_events to check if that's the case.

Answer 2

Another case would be:

If you have two elements having class name .intRevSections slideDown would run twice, and callback would fire twice...

Hope this helps, Sinan.

Answer 3

Sinan already discovered the problem, but did not in fact post an answer. the answer is:

Find out why You have two divs (if You create them from JS the other function might be run twice as well)

You may also want to fix the code so that it uses only one div even if You have two of them

 $('.intRevSections:first').slideDown('slow',function(){
   current=-1;
   addIrField();
  });

Answer 4

try this:

if (this.id == "intRev_yes") {
        if ($('div#mainField').is(':empty')) {
            $('.intRevSections').slideDown('slow', function(event) {
                event.stopPropagation();
                current = -1;
                addIrField();
            });
        }
    }