jQuery UI对话框 - X秒后自动关闭

Question

这段代码运行得非常完美，但是——对话框窗口不会在我期望的X毫秒后关闭...

setTimeout函数被执行（我在那里放置了alert()并且它起作用了...），所以我想问题可能出在$("#alert div").dialog('close');上，但我不知道哪里出错了...

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            setTimeout(function() {
                $("#alert div").dialog('close');
            }, 2000);
        }
    });
}

编辑： 如果有帮助的话，这是HTML：

<div id="alert">
    <span>Password change</span>
    <div>Password was successfully changed.</div>
</div>

已解决！ 如果有人知道为什么我的代码不起作用，那就太好了...

- Martin

---

请查看我的更新答案，并解释为什么您期望的方法不起作用。 - j08691

Answer 1

您遇到了作用域问题。请尝试此jsFiddle示例：

if ($("#alert").length) {
    var title;
    if ($("#alert span").length) {
        title = $("#alert span").text();
    }
    $("#alert div").dialog({
        title: title,
        modal: true,
        open: function() {
            var foo = $(this);
            setTimeout(function() {
               foo.dialog('close');
            }, 2000);
        }
    });
}​

发生这种情况并且不能按照你的期望工作是因为你引用了成为对话框的目标div的方式，以及jQuery UI构建对话框的方式。如果你查看开发人员控制台，你会发现jQuery将你的div从DOM中的原始位置移出，因此无法再通过#alert div引用它，因为它不再是#alert的子项。如果你给那个div分配了自己的ID，它将按预期工作，并且你不需要使用临时变量来引用它。

- j08691

---

为什么在这里作用域是个问题？好像他并不打算在setTimeout回调函数中使用this。 - Hubro

@Codemonkey - 看看我的更新，了解原因。如果需要更多细节，请告诉我。 - j08691

基本上，jQuery UI无法像使用“＃alert”一样智能地处理“＃alert div”。 - Martin

我不会这么说。问题在于jQuery在幕后进行了一些元素洗牌，尽管您最初的引用可用于创建对话框，但在两秒钟后关闭它并不正确，因为jQuery已经进行了更改。 - j08691

Answer 2

测试并且可用的在线演示：

http://jsfiddle.net/oscarj24/q6tD9/2/

我认为这种方式更好：

jQuery.fn.exists = function(){return this.length>0;}

$(function() {
    if($('#alert').exists()){
        var modal = $('#alert div');
        modal.dialog({ title: $('#alert span').text(), modal: true });
        var opened = modal.dialog('isOpen');
        if(opened){
            setTimeout(function(){ 
               modal.dialog('close'); 
            }, 2000);
        }
    }
});​

- Oscar Jara