JQuery：当.load（）完成插入新html时执行调用？

Question

我有一个函数，我调用它来将从 php 文件返回的 html 加载到 div 中。将 html 放入 div 后，我希望它为显示 div 的颜色框调用 jquery 函数。我遇到的问题是回调是在 html 实际放入 div 之前执行的。有没有办法让 jquery 在 html 实际上完全放入 div 时运行函数，而不是在它刚刚完成执行 php 时？

函数长这样……

function viewDetails(vinNum){
    $('#detailsContainer').load('/actions/myfile.php?var='+myVar,function(){
        $(".example3").colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});
    });
}

问题是回调在实际完成将 html 放入 div 之前被调用。这可能是由于 php 在等待 mysql 为其提供所需数据时输出了一些 html 造成的吗？如果是这样，我应该检索所有数据并一次回显所有 html 吗？

---

编辑： 这是我现在尝试过的，结果相同。我还在正在加载的 php 文件中添加了一个 javascript 警报。在回调调用颜色框之后调用警报。

function viewDetails(myVar) {
    $.ajax({ 
        url: '/actions/myfile.php', 
        data: 'var=' + myVar,
        success: function(html) {
            $('#detailsContainer').html(html);
        },
        complete: function(){
            $(".example3").colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});
        }
    });
}

---

EDIT FINAL：我发现颜色框从一开始就被错误地调用了。我从别人那里继承了一些代码，我认为它设置正确。我所要做的就是删除 (".example3") 类调用，它工作得很好。该类调用将该方法附加到与该类的任何链接，因此在回调完成之前调用它。回调所做的只是将 colorbox 方法重新分配给具有该类的项目。我所有的漫无边际可能会让事情变得像泥巴一样清晰，但感谢大家的投入。这是最后的工作电话......

$('#detailsContainer').load('/actions/myfile.php?var='+myVar,function(){
        $.colorbox({transition:"elastic", speed:"100", inline:true, href:"#hiddenModalContentbox"});                                                                   
    });

Answer 1

更好的方法是实际使用$.ajax()。这将使您可以使用 ajaxStart、ajaxStop、完成、错误、成功等方法。无论如何，使用 .load() 会拉出 $.ajax()，因此您不妨给自己带来它带来的所有好处。

Answer 2

您可以下拉到$.get 或$.ajax 并自己插入 HTML，从而在调用 colorbox 之前验证它已经发生。

function viewDetails(vinNum) {
    $.ajax({ 
        url: '/actions/myfile.php', 
        data: { var: myVar },
        success: function(html) {
            $('#detailsContainer').html(html);
            $('.example3').colorbox ...
        }
    });
}

Answer 3

我原以为 php 在获取数据之前不太可能回显一些 HTML，但这也取决于您在脚本中回显数据的位置。

话虽如此，我也发现 .load() 有问题，但我没有花足够的时间试图找出原因。我的问题略有不同，因为我想在页面上动态创建元素。

等一下，你们这些家伙真快....见 T Stone 的回答

Answer 4

不，回调是在实际加载内容后执行的，但如果元素是动态加载的，您尝试使用的插件（颜色框）可能无法正常工作。

验证这一点的最佳方法是尝试提醒来自加载部分的某些内容，例如：

console.log($('.example3').html());

如果它显示了元素内容，那么当回调被触发并且唯一的罪魁祸首是颜色框时，内容就会被加载并通过 DOM 访问。

为了演示 load() 的回调确实在加载的内容实际附加到 DOM 后触发，这里有一个小演示： http://jsfiddle.net/3ZAQB/1/