0

我有一些关于让 javascript 在对话框中正确触发的问题。

下面是我目前用来加载对话框的 scripts.js 中的代码

function LoadDialog(url, title) {
    var DialogBox = $('<div class="dialog-container"></div>').dialog({ modal: true, autoOpen: false, resizeable: true }).dialog({ width: 500, height: 'auto' });
    DialogBox.html('<div class="ajax-load"><img src="/Content/loading.gif" alt="loading"></div>').dialog({ buttons: null, title: 'Loading..' });
    DialogBox.dialog('open').load(url, function () {
        DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } });
    });
}

$(function () {
    $('.as-dialog').click(function (e) { LoadDialog($(this).attr('href'), $(this).attr('title')); return false; });
});

尽管默认情况下对话框内不会触发任何 javascript 代码。例如，我将一个带有不显眼验证的小表单加载到对话框中。没有身体、头部等，只有一个容器 div 和表单本身。默认情况下，验证不起作用，如果我在 script.js $(function(){}) 下为表单添加事件处理程序，它不会触发。如果我添加以下 js 引用和要与表单一起加载的代码块，则可以解决一个问题：

<script src="/Scripts/libs/jquery.validate.min.js"></script>
            <script src="/Scripts/libs/jquery.validate.unobtrusive.js"></script>
            <script type="text/javascript">
                $(function () {
                    $('#form_Create').submit(function (e) {
                        e.preventDefault();
                    });
                });
            </script>

关于上述代码的不起作用是验证将始终有效，但如果我打开对话框，关闭它，然后再次打开它，preventdefault 将停止工作并且表单将发布。这可能是脚本问题的多重负载还是什么？虽然如果放在scripts.js中没有“准备好的文档”代码在对话框中工作（尽管标准javascript函数工作），但我真的没有其他选择。有没有更好的方法在动态加载的文件中使用 javascript，或者我必须将整个表单放在父页面中才能可靠地处理它们？关于你应该如何处理这个问题的任何意见？

4

2 回答 2

0

以下打开对话框的方法似乎解决了我的主要问题：

var Box = $('#dialog-container');
    if (Box.length === 0) {
        Box = $('<div id="dialog-container"></div>').appendTo('body');
    } else { Box.empty(); }

不确定 atm 是否需要 empty()，因为似乎 load 无论如何都会这样做。但是使用这段代码，我可以打开对话框多少次我喜欢并且代码块仍将执行。

尽管我的问题/问题是关于我是否必须忍受从加载的页面调用一些脚本文件，或者有更好的方法可以从父母加载的文件中启用脚本运行。但至少现在一切似乎都运行良好。

于 2012-09-07T21:20:30.993 回答
0

小提琴确实会受到欢迎，但要开球：

DialogBox.dialog({ title: title, Buttons: null, position: 'center', close: function (ev, ui) { $(this).dialog("destroy"); } });

如果我们应用一些格式并将其分解，这一行可能是一个问题：

var obj = {};
obj.title = title;
obj.Buttons = null;
obj.position = 'center';
obj.close = function(ev,ui)
{
    $(this).dialog("destroy");//-->this will point to obj!!
};
DialogBox.dialog(obj);

我认为您想要的是this指向，通常称为thator 或_self.

或者，您可以做的是创建一个闭包，以保留对创建对象的上下文的引用：

obj.close = (function(that)
{
    return function(ev,ui)
    {
        that.dialog("destroy");
    };
})($(this));

也许这与您的问题无关，但只是为了安全起见：设置小提琴

于 2012-09-06T14:41:39.423 回答