jQuery的点击不工作两次 [英] Jquery click doesn't work twice

问题描述

我想写用ajax CRUD操作。这里是一些code：
这是我的视图类：

I'm trying to write CRUD operations using ajax. Here some code: These are my View classes:

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

在这里，我的标签制造商：

And here my Tag builder:

    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？
谁能帮助我？

So, I have major problem if the dialog was called twice without the calling page being refreshed: it just redirects me to the action page. The question is how to update @Html.Action without reloading the page? Could anyone help me?

推荐答案

在主视图您的 @foreach 循环生成每个照片这又是创造与类=dialogLink。

Your @foreach loop in the main view is generating a partial view for each Photo which in turn is creating a link with class="dialogLink".

您脚本处理这些链接的点击事件，并与类=dialogLink新链接替换它。但是，新的链接没有一个。点击（）处理程序，以便单击新（更换）链接不激活你的脚本。

Your script handles the click event of these links and replaces it with a new link with class="dialogLink". But the new link does not have a .click() handler so clicking on the new (replacement) link does not activate your script.

相反，你需要使用事件代表团利用来处理事件动态生成内容的。对（）方法（也可参考这里的详细信息，事件委托）。另请注意，您目前使用 $（'。dialogLink'）的。在（'点击'，功能（）{是 $相当于（ .dialogLink'）。点击（函数（）{，不使用事件代表团，它附加一个处理程序，在页面加载时间存在于DOM元素，而不是元素可能在将来添加。

Instead you need to use event delegation to handle events for dynamically generated content using the .on() method (refer also here for more information on event delegation). Note also that your current use of $('.dialogLink').on('click', function () { is the equivalent of $('.dialogLink').click(function () { and is not using event delegation. It attaches a handler to elements that exist in the DOM at the time the page is loaded, not to elements that might be added in the future.

你的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 元素，你可以使用＆LT; D​​IV CLASS =照片＆GT; 如同上面，然后通过使用 VAR updateTargetId = $（此引用它）.closest（'照片'）; 和删除 builder.Attributes.Add（数据更新目标-ID，updateTargetId）; 从 DialogFormLink（）法行code的

Side note: There is no real need to add an id=@p.PhotoId to the containing div element and you could use <div class="photo"> as per above, and then reference it by using var updateTargetId = $(this).closest('.photo'); and delete the builder.Attributes.Add("data-update-target-id", updateTargetId); line of code from your DialogFormLink() method

这篇关于jQuery的点击不工作两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！