JS文件并不在局部视图解决它后刷新 [英] The JS file doesn't work in partial view after it refreshed

问题描述

这是<一个分支问题href=\"http://stackoverflow.com/questions/34450795/js-file-not-loaded-after-partial-view-is-refreshed/34450945?noredirect=1#comment56643493_34450945\">Js局部视图文件后没有装入刷新。
该broblem是，如果我把我的脚本到主视图不会在部分工作。
我的自定义脚本：

  $（函数（）{
    $ .ajaxSetup（{缓存：假}）;
    VAR定时器= window.setTimeout（函数（）{
        $（警报）。fadeTo（1000）.slideUp（1000，函数（）{
            $（本）.hide（）;
        }）;
    }，3000）;
    $（[数据隐藏]）。在（点击，函数（）{
        如果（定时器！= NULL）{
            clearTimeout（定时器）;
            $（本）.closest（+ $（本）.attr（数据隐藏）。）隐藏（）。
        }
    }）;
}）;
 

照片，我需要用我的脚本局部视图：

 ＆LT; D​​IV CLASS =以及＆GT;
    ＆LT; H3＆GT;
        ＆LT;强＆GT; @ Model.Name＆LT; / STRONG＆GT;
        ＆LT;跨度类=右拉标签标签主要＆GT; @ Model.AverageRaiting.ToString（＃星）＆LT; / SPAN＆GT;
    ＆LT; / H3 GT＆;
    ＆LT;跨度类=引领＆GT; @ Model.Description＆LT; / SPAN＆GT;
    @ Html.DialogFormLink（更新，Url.Action（UpdatePhoto，新{ID = @ M​​odel.PhotoId}），更新照片，Url.Action（照片））
    @ Html.Action（InitializeAlerts）
＆LT; / DIV＆GT;
 

和partail视图_Alert的渲染的部分，我需要使用上面的脚本：

  @ {
    VAR警报= TempData.ContainsKey（Alert.TempDataKey）
                ？ （列表＆LT;警报和GT;）的TempData [Alert.TempDataKey]
                新名单＆LT;警报和GT;（）;    如果（alerts.Any（））
    {
        ＆LT;小时/＆GT;
    }
    的foreach（在警报VAR警报）
    {
        VAR dismissableClass = alert.Dismissable？ 警报-dismissable：空;
        ＆LT; D​​IV CLASS =警报[e-mail]在@dismissableClass变脸＆GT;
            @if（alert.Dismissable）
            {
                ＆LT;按钮式=按钮级=关闭ARIA标签=关闭数据隐藏=警报＆GT;＆安培;倍;＆LT; /按钮＆GT;
            }
            @ Html.Raw（alert.Message）
        ＆LT; / DIV＆GT;
    }
}
 

解决方案

使用委托的事件处理程序：

 的$（document）。在（点击，[数据隐藏]功能（）
 

jQuery选择仅在活动时间运行的 的，因此将动态添加元素的工作。

其工作原理是在非改变的祖先元素（文件是最安全的默认，如果没有别的接近/方便）侦听该事件。然后，它适用于在选择器中的气泡链的元素。然后，它适用于你的事件处理函数只引起该事件的匹配元素。

相比，事件处理程序连接到各个元素和任何转速差，这是非常有效的可以忽略不计，你根本无法点击速度不够快，注意：）

This is branch question of "Js file not loaded after partial view is refreshed". The broblem is that if I put my script in to the main view it doesn't work in partial. My custom script:

$(function() {
    $.ajaxSetup({ cache: false });
    var timer = window.setTimeout(function () {
        $(".alert").fadeTo(1000).slideUp(1000, function () {
            $(this).hide();
        });
    }, 3000);
    $("[data-hide]").on("click", function () {
        if (timer != null) {
            clearTimeout(timer);
            $(this).closest("." + $(this).attr("data-hide")).hide();
        }
    });
});

The Photo partial view where I need to use my script:

<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 {id = @Model.PhotoId}), "Update Photo", Url.Action("Photo"))
    @Html.Action("InitializeAlerts")
</div>

And partail view "_Alert" which rendering in to the partial where I need to use the script above:

@{
    var alerts = TempData.ContainsKey(Alert.TempDataKey)
                ? (List<Alert>)TempData[Alert.TempDataKey]
                : new List<Alert>();

    if (alerts.Any())
    {
        <hr />
    }
    foreach (var alert in alerts)
    {
        var dismissableClass = alert.Dismissable? "alert-dismissable" : null;
        <div class="alert [e-mail] fade in @dismissableClass">
            @if (alert.Dismissable)
            {
                <button type="button" class="close" aria-label="close" data-hide="alert">&times;</button>
            }
            @Html.Raw(alert.Message)
        </div>
    }
}

解决方案

Use a delegated event handler:

$(document).on('click', "[data-hide]", function () 

The jQuery selector is only run at event time, so it will work with dynamically added elements.

It works by listening for the event at a non-changing ancestor element (document is the safest default if nothing else is closer/convenient). It then applies the selector to the elements in the bubble-chain. It then applies your event handler function to only the matching elements that caused the event.

This is very efficient compared to connecting event handlers to individual elements and any speed difference is negligible as you simply cannot click fast enough to notice :)

这篇关于JS文件并不在局部视图解决它后刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！