Question

我正在使用ajax通过循环插入一系列信息块。每个块都有一个标题，默认情况下隐藏在其中的长描述。它们的功能类似于手风琴，在所有块中一次只显示一个描述。

问题是打开第一个块的描述。我真的很喜欢这样做在创建它们的循环之后立即完成javascript。有可能操纵在不使用回调的情况下创建ajax调用的元素？

<!-- example code-->
<style>
    .placeholder, .long_description{
    display:none;}
</style>
</head><body>
<script>  /* yes, this script is in the body, dont know if it matters */
$(document).ready(function() {
    $(".placeholder").each(function(){  // Use the divs to get the blocks
        var blockname = $(this).html();  // the contents if the div is the ID for the ajax POST
        $.post("/service_app/dyn_block",'form='+blockname, function(data){
            var divname  = '#div_' + blockname;
            $(divname).after(data);
            $(this).setupAccrdFnctly(); //not the actual code
        });
    });

    /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */
    /*  Display the long description in the first dyn_block */
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast');
});
</script>
<!-- These lines are generated by PHP -->
<!-- It is POSSIBLE to display the dyn_blocks -->
<!-- here but I would really rather not -->
<div id="div_servicetype" class="placeholder">servicetype</div>     
<div id="div_custtype" class="placeholder">custtype</div>           
<div id="div_custinfo" class="placeholder">custinfo</div>           
<div id="div_businfo" class="placeholder">businfo</div>
</body>

Answer 1

AJAX本质上是“异步”的。这意味着在异步请求发出后，执行继续愉快;在AJAX调用完成之前，您期望在那里的内容将不会存在。因此，当您尝试访问内容时，您将无法获得任何内容。

在处理异步操作时，您需要使用回调，因为您永远无法知道操作何时完成。我不确定你为什么反对使用回调 - 这就是它的原因 - 来帮助你处理异步操作。

修改

如果将async属性设置为false，则可以使用SJAX（同步JAX）。因此可以按照您的建议进行操作，但是在请求完成之前，您将锁定浏览器。

Answer 2

问题在于AJAX是异步（默认情况下）

$(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast');

将在有任何数据之前执行。所以你无法避免回调。

您可以定义以下函数，而不是轮询

var amount = $(".placeholder").size();
function ajaxDone() {
 amount--:
 if(amount == 0) {
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast');
 }
}

如果你想在完成所有处理后滑动第一个。

所以脚本看起来像这样

<script>  /* yes, this script is in the body, dont know if it matters */

    var amount = $(".placeholder").size();
    function ajaxDone() {
       amount--:
       if(amount == 0) {
         $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast');
       }
    }


        $(document).ready(function() {
            $(".placeholder").each(function(){  // Use the divs to get the blocks
                var blockname = $(this).html();  // the contents if the div is the ID for the ajax POST
                $.post("/service_app/dyn_block",'form='+blockname, function(data){
                    var divname  = '#div_' + blockname;
                    $(divname).after(data);
                    $(this).setupAccrdFnctly(); //not the actual code
                });
            });

            /* THIS LINE IS THE PROBLEM LINE, is it possible to reference the code ajax inserted */
            /*  Display the long description in the first dyn_block */

        });
        </script>

编辑：关于你不知道在HTML上使用javascript是否重要的评论，请检查this SO question

正如尼克所说，有更好的方法来实现同样的目标（而不是使用ajaxDone功能）

$(document).ajaxStop(function() { 
    $(".dyn_block").first().find(".long_description").addClass('active').slideDown('fast'); 
    $(this).unbind('ajaxStop'); 
});

操纵ajax插入的内容，而不使用回调

2 个答案: