Jquery 点击不起作用两次

Question

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

//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>
}

sript:

$('.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生成一个局部视图，该视图又创建了一个与class="dialogLink"的链接。

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

相反，您需要使用事件委派来处理使用.on（）方法动态生成的内容的事件（有关事件委派的更多信息，请参阅此处）。还要注意，您当前使用的$('.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() { 
    ....
});

旁注：不需要向包含的div元素添加id=@p.PhotoId，您可以按照上面的说明使用<div class="photo">，然后使用var updateTargetId = $(this).closest('.photo');引用它，并从DialogFormLink()方法中删除builder.Attributes.Add("data-update-target-id", updateTargetId);行代码