从函数内显示JqueryUI模态窗口时出错

时间:2012-06-28 18:45:58

标签: jquery jquery-ui

我确信这方面有一个简单的解决方案,但到目前为止它还在逃避我。我试图在函数中使用jqueryui打开一个模态窗口,它失败并显示消息“对话框不是函数”。最终我要用通过ajax拉出的内容来填充模态,但我已经将它剥离到裸位以找出为什么我无法实例化模态窗口。我正在使用谷歌CDN的jquery 1.7.2和jqueryui 1.8.18。

<!-- as a link -->
<a href="javascript:view_log('1');">Log 1</a>

<!-- as a button -->
<input type="button" id="thebutton" value="View Log" />

<script type="text/javascript">

/* this works on page load */
var test1 = $(document.createElement('div'));
test1.dialog({ modal:true });
test1.html('Testing');

/* this also works (on page load) */
function displayModal(content) {
    var newDiv = $(document.createElement('div'));
    newDiv.dialog({ modal:true });
    newDiv.html(content);
}
displayModal('Testing by calling displayModal() function');

/* this fails with error "newDiv.dialog is not a function" */
function view_log(id) {
    displayModal('Log for id ' + id);
}

/* this also fails, same error ... */
$('#thebutton').bind('click', function() {
    displayModal('Testing again...');
});

</script>

任何可以指出我的错误的jquery专家?

谢谢!

1 个答案:

答案 0 :(得分:1)

这对我来说很好。我唯一能想到的就是你应该使用$(document).ready(function() {});

$(document).ready(function() {
    $('#thebutton').bind('click', function() {
        displayModal('Testing again...');
    });
});

Live DEMO