Jquery jqModal正在尝试运行我的整个页面！

我刚开始尝试jqModal，我遇到了一个奇怪的问题

模态窗口显示正确，但当我单击其中的任何位置时，会出现javascript错误。当我看到这行令人不快的代码时，结果发现jqModal试图运行我的整个页面，就好像它是一大块javascript一样

自从我写了这篇文章后，我发现代码在FireFox中运行良好。问题当然是IE

我的标记：

<script type="text/javascript">

    $(document).ready(function () {

        $('#jqmWindowContainer').jqm({ 
            modal: true,
            ajax: '<%: Url.Action("Save", "AssetSearch") %>',
            onHide: myAddClose
        });

        function myAddClose(hash) {
            hash.w.fadeOut('300', function () { hash.o.remove(); });
        }

    }); 

    </script> 


<a href="#" class="jqModal display-field-right">Save this search</a>  
<span id="jqmWindowContainer" class="jqmWindow">  
</span> 

$（文档）.ready（函数（）{
$（'#jqmWindowContainer'）.jqm（{
莫代尔：是的，
ajax:“”，
onHide:myAddClose
});
函数myAddClose（哈希）{
hash.w.fadeOut（'300'，函数（）{hash.o.remove（）；}）；
}
}); 

模式窗口标记：

<div id="modalWindow" class="jqmWindow">  

    <% using (Ajax.BeginForm("Save", "AssetSearch", new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "modalWindow" }))
                {%>

                <!-- Validation summary -->
                <div class="validation-summary">
                    <%=ViewData["Message"]%>
                </div>

                    <%=Html.LabelFor(x => x.Name)%> 
                    <%=Html.TextBoxFor(x => x.Name)%> 


                <!-- Submit button -->
                <div class="submit-form">
                    <input type="submit" value="Save" /> 
                </div>
                <%
                }%>

</div>

<a class="jqmClose" href="#">Close</a> 

x、 名称）%%>
x、 名称）%%>

单击“保存此搜索”链接可正确显示模式窗口。单击模式中的任意位置会导致此错误：

第5行错误：对象不支持 此属性或方法

当我查看它试图执行的代码时，结果是我的整个页面触发了一个错误：

我不知道是什么导致了这种行为。如果我继续跳过错误，窗口将正常工作，单击“保存”时将调用我的操作方法。 救命啊

谢谢

---

Rick

您使用哪些版本的jQuery和jqModal

如果使用jQuery1.4.x，您应该验证jqModal.js是否包含

$（）

（例如

{$（）[t]（“keypress”，m）[t]（“keydown”，m）[t]（“mousedown”，m）；}

in）。这不能与jQuery 1.4.x一起使用。要解决此问题，请将

$（）

替换为

$（文档）

已更新：在您将链接发布到存在问题的站点后，我可以分析问题。如果单击“保存此搜索”，将从加载div。结果将用作jqModal的对话框div。目前，div如下所示：

<div class="jqmPopupForm" id="jqmPopupForm">
    <div id="loadingMessage" style="display: none;">
        Saving...
    </div>
    <form action="/matrix6studios/AssetSearch/Save"
          method="post"
          onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
          onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: &#39;Post&#39;, loadingElementId: &#39;loadingMessage&#39;, updateTargetId: &#39;jqmPopupForm&#39; });">
    <div class="sign-in-validation-summary">
    </div>
    <fieldset>
        <legend>Save Your Search</legend>
        <ol>
            <li>
                <label for="Name">
                    Name</label>
                <input id="Text1" name="Name" type="text" value="" />
            </li>
        </ol>
    </fieldset>
    <fieldset class="submit">
        <input type="submit" value="Save" />
    </fieldset>
    </form>
</div>
<a class="jqmClose" href="#">Close</a>

下一个问题是：您的代码有两个id=“jqmWindowContainer”的元素

您的代码有行

<link rel="stylesheet" type="text/css" media="screen"
      href="http://camp.matrix6.com/content/css/jqModal.css" />
<script type="text/javascript"
        src="http://camp.matrix6.com/Content/js/jqModal.js"></script>

在HTML代码的中间。这是不允许的。应将

元素移动到

的内部。此外，在一个页面上包含两次

和

的代码，这也是非常糟糕的。不应在同一页面上两次加载jqModal.js。如果将代码移动到

位置，则只能放置一次

---

我可以继续处理不太重要的错误，以严格遵守您使用的XHTML1.0。例如，您应该将

元素放置在

中，并将

放置在

上，以此类推。我建议您在中验证页面。

您使用哪些版本的jQuery和jqModal

如果使用jQuery1.4.x，您应该验证jqModal.js是否包含

$（）

（例如

{$（）[t]（“keypress”，m）[t]（“keydown”，m）[t]（“mousedown”，m）；}

in）。这不能与jQuery 1.4.x一起使用。要解决此问题，请将

$（）

替换为

$（文档）

已更新：在您将链接发布到存在问题的站点后，我可以分析问题。如果单击“保存此搜索”，将从加载div。结果将用作jqModal的对话框div。目前，div如下所示：

<div class="jqmPopupForm" id="jqmPopupForm">
    <div id="loadingMessage" style="display: none;">
        Saving...
    </div>
    <form action="/matrix6studios/AssetSearch/Save"
          method="post"
          onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
          onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: &#39;Post&#39;, loadingElementId: &#39;loadingMessage&#39;, updateTargetId: &#39;jqmPopupForm&#39; });">
    <div class="sign-in-validation-summary">
    </div>
    <fieldset>
        <legend>Save Your Search</legend>
        <ol>
            <li>
                <label for="Name">
                    Name</label>
                <input id="Text1" name="Name" type="text" value="" />
            </li>
        </ol>
    </fieldset>
    <fieldset class="submit">
        <input type="submit" value="Save" />
    </fieldset>
    </form>
</div>
<a class="jqmClose" href="#">Close</a>

下一个问题是：您的代码有两个id=“jqmWindowContainer”的元素

您的代码有行

<link rel="stylesheet" type="text/css" media="screen"
      href="http://camp.matrix6.com/content/css/jqModal.css" />
<script type="text/javascript"
        src="http://camp.matrix6.com/Content/js/jqModal.js"></script>

在HTML代码的中间。这是不允许的。应将

元素移动到

的内部。此外，在一个页面上包含两次

和

的代码，这也是非常糟糕的。不应在同一页面上两次加载jqModal.js。如果将代码移动到

位置，则只能放置一次

我可以继续处理不太重要的错误，以严格遵守您使用的XHTML1.0。例如，您应该将

元素放置在

中，并将

放置在

上，以此类推。我建议您在中验证页面。

我认为您的代码：

function myAddClose(hash) {
    hash.w.fadeOut('300', function () { hash.o.remove(); });
}

需要在错误的范围内。通过将代码移到

 "$(document).ready(function (){})

代码

我认为您的代码：

function myAddClose(hash) {
    hash.w.fadeOut('300', function () { hash.o.remove(); });
}

需要在错误的范围内。通过将代码移到

 "$(document).ready(function (){})

---

code

我得到的是Sys.Mvc.AsyncForm.handleClick不是Firefox中的函数。我假设您使用的是ASP.NET MVC版本2，但在您的页面中有一个来自MVC版本1的引用，并且没有

Sys.MVC.AsyncForm.handleClick

函数。如果您使用MVC 2，您应该参考相应版本的javascript文件。

我得到的

Sys.MVC.AsyncForm.handleClick不是Firefox中的函数。我假设您使用的是ASP.NET MVC版本2，但在您的页面中有一个来自MVC版本1的引用，并且没有
Sys.MVC.AsyncForm.handleClick
函数。如果您使用MVC2，您应该引用相应版本的javascript文件。
我在Chrome中也遇到了一个非常类似的错误

这是为了打破jquery 1.4.2中处理
$（）
的方式上的变化，因为jqmodal从未被更新以用于jquery 1.4.x系列

选中此链接（列表中的第4项）

您可以采取哪些措施来缓解此问题：（以下所有选项都是互斥的）


将jquery 1.4.2替换为jquery 1.3.1或类似版本
使用jquery团队发布的这一版本可以缓解升级问题
手动检查jqmodal.js的源代码并修复任何中断的不兼容