Question

我有一个局部视图的视图在视图中，有两个输入和一个提交输入，用于向数据库添加显示名称和URL地址。在部分视图中，我有一个表，列出了具有删除URL的提交输入的现有URL。我没有添加问题，但是当我想删除一个URL时，jQuery中的删除事件在发布页面后只运行一次。当我点击删除按钮时，删除事件不起作用，它将添加事件我该怎么办？

这是我的观点：

<diventer code here class="page-header clearfix">
    <div class="page-header-inner clearfix">
        <div class="page-title">
            <h2>text</h2>
            <div class="page-title-block"></div>
        </div>
        <div class="breadcrumbs">
            <p><a href="~/Home/Index">text</a> &#187;text</p>
        </div>
    </div>
</div>



@using (Html.BeginForm("AddSiteUrl", "Admin", FormMethod.Post, new { @id = "myform" }))
{
    Html.EnableClientValidation(false);
    <div class="content-wrapper page-content-wrapper clearfix">
        <div class="main-content page-content">

            <div class="inner-content-wrapper">

                <div class="course-finder-full clearfix">

                    <div class="course-finder-icon"></div>
                    <div class="course-finder-full-form">
                        <div>
                            @Html.TextBoxFor(model => model.SiteUrl.Name, new { @placeholder = "text", style = "width: 150px;" })
                            @Html.TextBoxFor(model => model.SiteUrl.LinkAddress, new { @placeholder = "text" })
                            <input type="submit" value="name" name="btn.Add" id="btn_add" style="display: inline-block; vertical-align: top; padding-right: 20px" />
                        </div>
                        <div>
                            @Html.ValidationMessageFor(model => model.SiteUrl.Name)
                            <br />
                            @Html.ValidationMessageFor(model => model.SiteUrl.LinkAddress)
                        </div>

                    </div>
                </div>
                <div id="div_urllist">
                    @Html.Partial("_SitUrlList", Model.SiteUrls)

                </div>
            </div>

        </div>
        <div class="sidebar-right page-content">

            <div class="content-block">
            </div>

            <div class="content-block">

            </div>
            <div class="">

                <div></div>
            </div>
        </div>
    </div>
}

这是Js

<script type="text/javascript">
    $(function () {
        alert("fuc");
        $("#btn_add").click(function (e) {
            alert("add");
            e.preventDefault();
            if ($("#myform").valid()) {
                $.ajax({
                    url: "/Admin/AddSiteUrl",
                    data: $('#myform').serialize(),
                    type: "Post",
                    dataType: "Json",
                    success: function (result) {
                        if (result.Success) {
                            $("#div_urllist").html(result.Html);
                        }
                        eval(result.Script);
                    },
                    error: function () {
                        alert("text");
                    }
                });
            }
        });

        //------------------------------------------------------
        $('.delurl').on('click', function (e) {
            alert("del");
        }).click(function (e) {
            e.preventDefault();
            $.ajax({
                url: "/Admin/DeletesiteUrl",
                data: { Id: this.id },
                type: "Post",
                dataType: "Json",
                success: function (result) {
                    if (result.Success) {
                        $("#div_urllist").html(result.Html);
                    }
                    eval(result.Script);
                },
                error: function () {
                    alert("text")
                }

            });
        });
        //------------------------------------------------------
    });


</script>

这是我的部分观点

<table style="width:100%;">
    <thead>
        <tr>
            <th>ردیف</th>
            <th>نام </th>
            <th>آدرس</th>
            <th>مدیریت</th>
        </tr>
    </thead>

    @{
        int i = 1;
        foreach (var item in Model)
        {
            <tbody>
                <tr>
                    <td data-title="ID">@i</td>
                    <td data-title="Course Name">@item.Name</td>
                    <td data-title="Program">@item.LinkAddress</td>
                    <td data-title="Length">
                        <input type="submit" value="حذف" id="@item.Id" class="button1 rounded-button delurl" onclick="delurlfunction()" />
                    </td>
                </tr>
            </tbody>
            i++;
        }
    }
</table>

发布前删除事件：

it work :D 这是在Ajax发布之后：

it call modal form submit event D:

Answer 1

将删除按钮的输入类型设为＆＃39;按钮＆＃39;而不是提交＆＃39;。

Answer 2

您正在将click事件处理程序附加到.delurl，该处理程序由您的部分视图动态添加。当您删除URL时，会替换（销毁并重新生成）#div_urllist的内容。这意味着之前附加到#div_urllist中元素的任何事件也会被删除，因此您的点击事件处理程序不再附加在事件上，因此不再运行。

您可以将点击处理程序附加到静态父元素#div_urllist，并告诉on()仅在.delurl上运行处理程序。另请注意，您应删除.click(...)，因为它是多余的。

$('#div_urllist').on('click', '.delurl', function (e) {
      alert("del");
      e.preventDefault();
      $.ajax(...);
});

有关上述语法的详细信息，请参阅jQuery on()。

在asp.net mvc中部分视图发布后，jQuery事件停止工作

2 个答案: