Question

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

今天的大问题：关于DOM的alert('foobar');究竟是什么？！

这是我的问题：我在数据库中有一个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()来模拟点击。我们在这里：像这样，这不起作用。只创建了cat_box（感谢PHP中内置的gd_box）， ie 只有第一个.trigger('click')有效。是的，我知道，我想我可以用PHP重建它，但我不想......

但要支持自己：如果我取消注释两个alert()，其他.trigger()也可以使用，我可以拥有我想要的内容（参见屏幕截图）。

两个问题：

地狱alert()如何让Jquery重新考虑DOM？好的，我明白了，谢谢。
我该如何解决？（我尝试了.live()，.on()等等......）

Answer 1

警报会暂停浏览器，在您的情况下，该机会会给予机会：

完成ajax-request
将新元素插入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');}
  );

查看working callback functionality的简约示例。第一次，通过回调触发更改，所有后续时间都会正常调用。

JQuery：触发点击Ajax生成的HTML

1 个答案: