1

私が自分自身を明確にしていない場合は、タイトルや説明を自由に編集してください.

今日の大きな疑問: alert('foobar');DOM で正確に何をするのか?!

これは私の問題です。データベースに取得する BIG TREE があります (3 レベル)。したがって、私の<form>場合、AJAXを使用して徐々にロードします（写真で確認できます）これHCI が私のコードです（簡略化されています）-コードの大部分を貼り付けて申し訳ありませんが、すべてが必要です-：

<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>

上記のコードは正常に動作します。しかし、フォームを送信すると、JQuery でツリーを再構築し、クリック.trigger()をシミュレートします。そして、ここにいます：このように、これは機能していません。(PHP に組み込まれている gd_box のおかげで) cat_box のみが作成されます。つまり、最初の.trigger('click')作品のみが機能します。はい、わかっています。PHP で再構築できると思いますが、再構築しない方がよいと思います..

しかし、気を引き締めてください。2つのコメントを外すとalert()、他の人.trigger()も機能し、必要なものを手に入れることができます（スクリーンショットを参照）。

2 つの質問:

  1. alert()Jquery が DOM を再考できるようにするにはどうすればよいでしょうか。わかりました、ありがとう。
  2. どうすれば修正できますか？.live()（私は、、などを試しました.on()...）
4

1 に答える 1

2

アラートはブラウザを停止します。これにより、あなたの場合、次の機会が得られます。

  1. ajax リクエストを完了する
  2. 新しい要素を dom* に挿入します

最後の呼び出しが完了するまで待機する機能を追加trigger()して、要素で実際に実行できるようにする必要があります。
通常、これは、関数が完了すると実行される関数にコールバックを渡すことによって行われます。

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);

*実際には、これはイベントキューに入れられ、コードの残りの部分より前にスケジュールされます。アラートの間、GUI スレッドの JS は完全に停止します。ajax-callback の評価は、コードの残りの部分より前にスケジュールされます (それを信頼できるかどうかは不明です)。

編集：

コードは次のようになります。

$("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');}
  );

動作中のコールバック機能の最小限の例を参照してください。最初は変更がコールバックでトリガーされ、それ以降はすべて通常どおり呼び出されます。

于 2012-12-10T15:54:44.453 に答える