Question

First of all I’d like to precise that I’ve read all the “jQuery called twice” suggestions in this website, and none of them had the problem I’m facing.

It’s so simple that I don’t understand how comes it behaves like this.

• I first call once and AJAX request that loads 20 records and put them in a table
• then in those <tr> I add one (yet) picture, and I assign events like this :

:

$('.moderation_ok').click(function() {
  return decisionOk($(this));
}); 

then

function decisionBoutonOk(t) {
  var p=t.parent().parent().parent().parent();
  var id=p.attr('id').substring(3);
  AjaxDevisSendDecision(id, 1, null);
  return false;
}

and in the Ajax function, if everything went fine I read the result where there is another row to add:

function AjaxDevisSendDecision(id, decision, raison) {
  $.ajax({
    url: '/json/devis/decision/',
    dataType: 'jsonp',
    data : { id: id, decision: decision, raison: raison },
    context: this,
    cache: false,
  })
  .success( function (data) {
    if (data.success) {
      /* Success */
      for (var x in data.result) {
        var s=data.result[x];
        addRowIntoTable(s);
        refreshEvents();
      }
    }
  });
}

The problem I’m facing is the first call is perfect and works perfectly: click => call AJAX => result of AJAX call ok => add new row…

And now I’m stuck: if I click on the image of the second row, the AjaxDevisSendDecision() is called instantaneously twice. And really don’t understand what’s going on.

Any idea?

Edit: if there’s an exception in the event handler there’s no problem anymore:

function decisionBoutonOk(t) {
  var p=t.parent().parent().parent().parent();
  var id=p.attr('id').substring(3);
  p.css({ backgroundColor: '#5f5' });
  p.stop(true,true).hide('slow');
  AjaxDevisSendDecision(id, 2, null);
  eeqsf(); /* unknown function = raise exception */
  return false;
}

maybe this could give a clue to understand what’s going on…

For your information, here’s almost the whole source code:

function refreshEvents() {
  $('tr').each(function() {
    var id=$(this).attr('id').substring(3);
    if(typeof(globT[id].height)!='undefined') {
      return;
    }
    /* First time here = remember height in pixels */
    globT[id].height=$(this).children('.principal').children('.texte').height();
    $(this).children('.principal').children('.texte').height('89px');
    $(this)
      .mouseenter(function() {
        var id=$(this).attr('id').substring(3);
        var c=$(this).children('.principal').children('.texte');
        c.stop(true, true).animate({ height: globT[id].height+'px'}, 'slow');
        c.children('.choix_moderateur').stop(true, true).fadeIn('slow');
      })
      .mouseleave(function() {
        var c=$(this).children('.principal').children('.texte');
        c.stop(true, true).animate({ height: '89px'}, 'slow');
        c.children('.choix_moderateur').stop(true, true).fadeOut('slow');
        c.children('.raison_refus').stop(true, true).fadeOut('slow');
      });
  });
  $('.moderation_ok').click(function(event) {
    event.preventDefault();
    return decisionBoutonOk($(this));
  });
}

function decisionBoutonOk(t) {
  var p=t.parent().parent().parent().parent();
  var id=p.attr('id').substring(3);
  AjaxDevisSendDecision(id, 1,null);
  eeqsf();
  return false;
}

function AjaxDevisGet(nb, notassigned) {
  $.ajax({
    url: '/json/devis/liste/',
    dataType: 'jsonp',
    data : { nb: nb, notassigned: notassigned },
    context: this,
    success: function (data) {
      if (data.success) {
        for (var x in data.result) {
          var s=data.result[x];
          ajouteDevisDansDOM(s);
        }
        refreshEvents();
      }
    }
  });
}

function AjaxDevisSendDecision(id, decision, raison) {
  $.ajax({
    url: '/json/devis/decision/',
    dataType: 'jsonp',
    data : { id: id, decision: decision, raison: raison },
    context: this,
    cache: false,
  })
  .success( function (data) {
    if (data.success) {
      /* success=add each row in the result */
      for (var x in data.result) {
        var s=data.result[x];
        ajouteDevisDansDOM(s);
        refreshEvents();
      }
    }
  })
  .complete( function () {
    console.log('complete');
  });
}

Answer 1

The problem was here:

function refreshEvents() {
  $('tr').each(function() {
    ...
    blabla
    ...
  });
  $('.moderation_ok').click(function(event) {
    ...
    blabla
    ...
  });
}

After a successful Ajax call, I called refreshEvents() and in this function (see before) I always called $('.moderation_ok').click(function(event) {}. This meant: “add another function if we click on all the elements that belong to the class moderation_ok.

I thought that when declaring functions like $('.moderation_ok').click(function(event) {} it overrides the click() behavior.
Nope!
I’m not deleting my question because my answer may be useful to others.

Here’s the code I added before:

$('.moderation_ok').unbind('click');

And now it works like a charm.

So, summary:

When declaring functions like $('.moderation_ok').click(function(event) {} jQuery adds this function the click() behavior. If you do twice this, the function will be called twice and so on.

In this case, use unbind() to remove any event handler: $('.moderation_ok').unbind('click');