1

如果我不清楚，请随时编辑标题或描述。

今天的大问题：DOM 到底做alert('foobar');了什么？！

这是我的问题：我在数据库中有一个大树要获取（3 个级别）。所以在我的<form>我逐渐加载它，使用AJAX（你可以在图片上看到它）人机交互 这是我的代码（简化） - 很抱歉粘贴大部分代码，但一切都需要 - ：

<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()用于模拟点击。我们在这里：像这样，这是行不通的。只有 cat_box 被创建（感谢 PHP 中内置的 gd_box），即只有第一个.trigger('click')工作。是的，我知道，我想我可以在 PHP 中重建它，但我不想......

但是要振作起来：如果我取消注释这两个alert()，其他人.trigger()也可以，我可以拥有我想要的东西（cf screenshot）。

两个问题：

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