javascript - 查询 : trigger a click on an Ajax generated HTML's

Question

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

今天的大问题:alert('foobar'); 究竟是什么？在 DOM 上？!

这是我的问题:我在数据库中有一棵大树要获取(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>

上面的代码工作正常。但是，当我提交表单时，我使用 .trigger() 在 JQuery 中重建树。 模拟点击。我们在这里:像这样，这是行不通的。只创建了 cat_box(多亏了 PHP 内置的 gd_box)，ie 只创建了第一个 .trigger('click')作品。是的，我知道，我想我可以用 PHP 重建它，但我不想..

但打起精神:如果我取消注释这两个 alert() , 其他 .trigger()也有效，我可以得到我想要的东西(参见屏幕截图)。

两个问题:

1. 这到底是怎么回事 alert()允许 Jquery 重新考虑 DOM 吗？好的，我明白了，谢谢。
2. 我该如何解决？ (我尝试了 .live() 、 .on() 等……)

Answer 1

警报会停止浏览器，在您的情况下，这会提供以下机会:

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 回调的评估安排在您的其余代码之前(不确定您是否可以依赖它)。

编辑:

您的代码可能如下所示:

$("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 的简约示例.第一次，通过回调触发更改，所有后续时间都正常调用。