Question

Please feel free to edit title or description if I’m not making myself clear.

Big question today : what exactly does alert('foobar'); on DOM ?!

This is my problem : I have a BIG TREE in database to fetch (3 levels). So in my <form> I load it gradually, with AJAX (you can see it on the picture)
Here is my code (simplified) – I am really sorry to paste a large part of code, but all is needed – :

<script type="text/javascript">
    $(document).ready(function(){
        // generate the CAT box
        $("input[name='or-idgd']").change(function(){
            var idgd = this.value;
            $.post(GLOBAL_HOST+"ajax.php", {'myarg':idgd},
              function(data){
                var form = '';
                var obj = jQuery.parseJSON(data);
                form += '<div>';
                for (var i = 0 ; i < obj.length ; i++) {
                  form += '<label for="'+obj[i].id_cat+'_cat">';
                  form += '<input id="'+obj[i].id_cat+'_cat" type="radio" name="or-idcat"';
                  form += 'value="'+obj[i].id_cat+'" >';
                  form += obj[i].cat_name+'</label>';
                }
                form += '</div>';
                $("div#box_cat").append(form);
              }
            );
        });
          // generate the COMP box
        $("input[name='or-idcat']").change(function(){
          var idcat = this.value;
          $.post(GLOBAL_HOST+"ajax.php", {'myarg2':idcat},
            function(data){
              $("div#box_comp").empty();
              var form = '';
              var obj = jQuery.parseJSON(data);
              form += '<div>';
              for (var i = 0 ; i < obj.length ; i++) {
               form += '<label for="'+obj[i].id_comp+'_comp">';
               form += '<input id="'+obj[i].id_comp+'_comp" type="radio" name="or-idcomp"';
               form += ' value="'+obj[i].id_comp+'">';
               form += obj[i].competence_nom+'</label>';
              }
              form += '</div>';
              $("div#box_comp").append(form);
            }
          );
        }));
<?php   /*** THIS IS THE INTERESTED PART - rebulding the tree cf screenshot ***/
        // When the form is submitted :
        if (!empty($_POST['or-idgd'])) { ?>
            $('#<?php echo $_POST['or-idgd']; ?>_gd').trigger('click');
<?php       if (!empty($_POST['or-idcat'])) { ?>
                //alert('before');
                $('#<?php echo $_POST['or-idcat']; ?>_cat').trigger('click');
                //alert('after');
<?php           if (!empty($_POST['or-idcomp'])) { ?>
                    $('#<?php echo $_POST['or-idcomp']; ?>_comp').prop('checked', true);
<?php           }
            }
        } ?>
    }); // document.ready
</script>

The code above works fine. But, when I submit the form, I rebuild the tree in JQuery, using .trigger() to simulate a click. And here we are : like this, this is not working. Only the cat_box is created (thanks to the gd_box built in PHP), ie only the first .trigger('click') works. Yes, I know, I think I can rebuild it in PHP, but I prefer not to..

But brace yourself : if I uncommented the two alert(), others .trigger() works too, and I can have what I want (cf screenshot).

Two questions :

1. How the hell alert() allow Jquery to reconsider DOM ? Ok, I get it, thanks.
2. How can I fix it ? (I tried .live(), .on(), etc …)

Answer 1

An alert halts the browser, which in your case gives the oportunity to:

1. complete the ajax-request
2. insert the new elements into the dom*

You need to add some functionality to make you trigger() wait for the last calls to complete, so it actually can be executed on your element.
Usually this is done, by handing a callback to the function which is executes once it is completed.

function doStuff(callback){
   // do Stuff

   callback();
}
function doMoreStuff(){
   // do more stuff after doStuff() is done
}

// do stuff and after(!) that do more stuff
function doStuff(doMoreStuff);

* actually this is put into the eventqueue and is scheduled before the rest of your code. During the alert, JS in the GUI-thread is completely stalled. The evaluation of the ajax-callback is scheduled before the rest of your code (not sure whether you can rely on that).

EDIT:

Your code could look like this:

$("input[name='or-idgd']").change(function(e,callback){
   // first parameter (e) is always the event object
   ...
   // if this eventhandler is called with a callback function given
   // execute it in the end of your function
   if(callback){callback()}
}

// and your modified trigger:

$('#<?php echo $_POST['or-idgd']; ?>_gd').trigger('change',
      // handing over the second trigger as a callback function
      // which gets executed after the first one is ready
      function(){$('#<?php echo $_POST['or-idcat']; ?>_cat').trigger('click');}
  );

See a minimalistic example of the working callback functionality. The first time, change is triggered with a callback, all subsequent times it’s called normally.