javascript - Jquery点击打开模态返回 "undefined is not a function"

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> 

“对话框”似乎是未定义的函数，但我还应该如何创建一个 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>

模态有效，它出现在页面的开头，我可以关闭然后单击输入框，它会再次出现。但是，如果我关闭模态，重新打开模态，然后单击 View ，它会发出两个警报，就像它创建了多个警报一样……关于如何解决此问题的任何想法？

Answer 1

$.find 和 $('selector') 的使用似乎有些差异。

This code return JavaScript Array object so any function of jQuery cannot be applied to resultset. Even when resultset seems to be identical.

See this post

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