Jquery 点击两次无效

Question

我正在尝试使用 ajax 编写 CRUD 操作。这里有一些代码：这些是我的观点类:

//PhotoSummary
@model PhotoAlbum.WEB.Models.PhotoViewModel
<div class="well">
    <h3>
        <strong>@Model.Name</strong>
        <span class="pull-right label label-primary">@Model.AverageRaiting.ToString("# stars")</span>
    </h3>
    <span class="lead">@Model.Description</span>
    @Html.DialogFormLink("Update", Url.Action("UpdatePhoto", new {photoId = @Model.PhotoId}), "Update Photo", @Model.PhotoId.ToString(), Url.Action("Photo"))
</div>

//Main View
@model PhotoAlbum.WEB.Models.PhotoListViewModel
@{
    ViewBag.Title = "My Photos";
}
@foreach (var p in @Model.Photos)
{
    <div id=@p.PhotoId>
        @Html.Action("Photo", new {photo = p})
    </div>
}

脚本：

$('.dialogLink').on('click', function () {
    var element = $(this);       
    var dialogTitle = element.attr('data-dialog-title');
    var updateTargetId = '#' + element.attr('data-update-target-id');
    var updateUrl = element.attr('data-update-url');
    var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
    var dialogDiv = "<div id='" + dialogId + "'></div>";

    $(dialogDiv).load(this.href, function () {
        $(this).dialog({
            modal: true,
            resizable: false,
            title: dialogTitle,
            close: function () { $(this).empty(); },
            buttons: {
                "Save": function () {
                    // Manually submit the form                        
                    var form = $('form', this);
                    $(form).submit();
                },
                "Cancel": function () { $(this).dialog('close'); }
            }
        });

        $.validator.unobtrusive.parse(this);
        wireUpForm(this, updateTargetId, updateUrl);
    });
    return false;
});});


function wireUpForm(dialog, updateTargetId, updateUrl) {
    $('form', dialog).submit(function () {
        if (!$(this).valid())
            return false;
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {

                if (result.success) {
                    $(dialog).dialog('close');
                    $(updateTargetId).load(updateUrl);
                } else {             
                    $(dialog).html(result);
                    $.validator.unobtrusive.parse(dialog);

                    wireUpForm(dialog, updateTargetId, updateUrl);
                }
            }
        });
        return false;
    });
}

这是我的标签生成器：

    public static MvcHtmlString DialogFormLink(this HtmlHelper htmlHelper, string linkText, string dialogContentUrl,
         string dialogTitle, string updateTargetId, string updateUrl)
    {
        TagBuilder builder = new TagBuilder("a");
        builder.SetInnerText(linkText);
        builder.Attributes.Add("href", dialogContentUrl);
        builder.Attributes.Add("data-dialog-title", dialogTitle);
        builder.Attributes.Add("data-update-target-id", updateTargetId);
        builder.Attributes.Add("data-update-url", updateUrl);
        builder.AddCssClass("dialogLink");
        return new MvcHtmlString(builder.ToString());
    }

所以，如果在调用页面没有刷新的情况下调用对话框两次，我就会遇到大问题：它只是将我重定向到操作页面。问题是如何在不重新加载页面的情况下更新@Html.Action？谁能帮帮我？

Answer 1

您在主视图中的 @foreach 循环正在为每个 Photo 生成局部视图，而这又会创建 link 和 class="dialogLink"。

您的脚本处理这些 link 的点击事件并将其替换为新的 link 和 class="dialogLink"。但是新的 link 没有 .click() 处理程序，因此单击新的（替换）link 不会激活您的脚本。

相反，您需要使用事件委托来处理动态生成内容的事件，使用 .on() method (refer also here 了解有关事件委托的更多信息）。另请注意，您当前使用的 $('.dialogLink').on('click', function () { 等同于 $('.dialogLink').click(function () {，并且未使用事件委托。它将处理程序附加到页面加载时 DOM 中存在的元素，而不是将来可能添加的元素。

将您的 html 更改为

<div id="photos">
    @foreach (var p in @Model.Photos)
    {
        <div class="photo">@Html.Action("Photo", new { photo = p })</div>
    }
</div>

然后修改脚本为

$('#photos').on('click', '.dialogLink', function() { 
    ....
});

旁注：没有真正需要将 id=@p.PhotoId 添加到包含的 div 元素，您可以按照上面的方法使用 <div class="photo">，然后使用 var updateTargetId = $(this).closest('.photo'); 并从您的 DialogFormLink() 方法

中删除 builder.Attributes.Add("data-update-target-id", updateTargetId); 代码行

Jquery 点击两次无效

Jquery click doesn't work twice

c#

ajax

jquery

crud

asp.net-mvc-5