Question

我试图在鼠标点击时打开一个模态，但我似乎无法让它工作。这是我的代码

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
    $("#Attack1Id").click(function () {
        var location = $.find("#dialog");
        $(location).dialog({
            title: "Dialog box",
            height: 300,
            modal: true,
            open: function (event, ui) {
                $(this).load("@Url.Action("FileTables", "Card")");
            },
            on: ('click', '.table a', function () {
                alert($(this).closest('tr').find('td:first').text())
            })
        })
    });
</script>

似乎＆＃34;对话＆＃34;是未定义的函数，但我想如何创建一个jquery对话框？

更新

为了清楚起见，这是我的整个HTML页面

@model CardSite.Models.Card

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>

@{
    ViewBag.Title = "Card";
}

<h2>New card type</h2>

@using (Html.BeginForm("CreateCard", "Card", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    <div class="form-group">
        @Html.LabelFor(m => m.Name)
        <div class="text-box-for">
            @Html.TextBoxFor(m => m.Name)
        </div>
        @Html.LabelFor(m => m.Attack1Id)
        <div class="text-box-for">
            @Html.TextBoxFor(m => m.Attack1Id)
        </div>

        <div id="dialog"></div>

    </div>

    <input type="submit" value="Create" class="btn btn-default" />
}



<script type="text/javascript">

    $(document).ready(function () {
        $("#Attack1Id").click(function () {
            var location = $.find("#dialog");
            $(location).dialog({
                title: "Dialog box",
                height: 300,
                modal: true,
                open: function (event, ui) {
                },
                on: ('click', '.table a', function () {
                    alert($(this).closest('tr').find('td:first').text())
                })
            })
        });
    });
</script>

---更新---

我刚刚将代码更新为

<script type="text/javascript">

    $(document).ready(function () {
        $("#Attack1Id").click(function () { 
            $("#dialog").dialog({
                title: "Dialog box",
                height: 300,
                modal: true,
                open: function (event, ui) {
                    $(this).load("@Url.Action("FileTables", "Card")");
                },
                on: ('click', '.table a', function () {
                    alert($(this).closest('tr').find('td:first').text())
                })
            });
        });
    });

    $(document).ready(
            $("#dialog").dialog({
                title: "Dialog box",
                height: 300,
                modal: true,
                open: function(event, ui) {
                    $(this).load("@Url.Action("FileTables", "Card")");
                },
                on: ('click', '.table a', function(){
                    alert($(this).closest('tr').find('td:first').text())
                })
            })
        );
</script>

和模态工作，它出现在页面的开头，我可以关闭，然后单击输入框，它再次出现。但是，如果我关闭模态，重新打开模态，然后单击视图，它会执行两个警报，就像它创建了多个警告...有关如何解决此问题的任何想法？

Answer 1

使用$.find和$('selector')之间似乎存在一些差异。

此代码返回JavaScript Array对象，因此jQuery的任何函数都不能应用于resultset。即使结果集似乎相同。

See this post

您是否尝试过使用$("#dialog")来选择对话框？

Answer 2

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#Attack1Id").click(function () { 
        $("#dialog").dialog({
            title: "Dialog box",
            height: 300,
            modal: true,
            open: function (event, ui) {
                $(this).load("@Url.Action("FileTables", "Card")");
            },
            on: ('click', '.table a', function () {
                alert($(this).closest('tr').find('td:first').text())
            })
        });
    });
});
</script>

更新：

我觉得您的脚本引用未在您的页面中调用。尝试使用以下代码替换脚本引用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

Jquery点击打开模态返回“undefined不是函数”

2 个答案: