部分视图中的 JavaScript 元素格式，但不起作用答案

【问题标题】：JavaScript element formatting in Partial view, but not functioning部分视图中的 JavaScript 元素格式，但不起作用
【发布时间】：2016-12-27 00:47:15
【问题描述】：

javascript 元素在主视图中有效，但在局部视图中不执行任何操作。它的格式正确，但无法正常工作。有什么建议吗？

看到这个小提琴：http://jsfiddle.net/bgrins/ctkY3/

<input type='text' class="basic"/>
<em id='basic-log'></em>

$(".basic").spectrum({
    color: "#f00",
    change: function(color) {
        $("#basic-log").text("change called: " + color.toHexString());
    }
});

我正在尝试在局部视图中包含颜色选择器。

【问题讨论】：

能否请您添加“不起作用”的代码？
刚刚更新了问题
这可能会启发你stackoverflow.com/questions/7556400/…。简而言之：在您的主视图中包含该脚本。
您是否在起始页上加载了部分内容？

标签： javascript jquery asp.net-mvc partial-views asp.net-mvc-partialview

【解决方案1】：

您实际上不能在局部视图中调用脚本部分并在那里执行此方法。这是设计使然。见达林的post here

您可以做的是，将此方法保留在主视图中。如果需要，您仍然可以从局部视图有条件地执行此操作。

所以在你的主视图中

<script>
    var mySettings = mySettings || {};
    mySettings.shouldIShowSpectrum = false;
</script>
@Html.Partial("YourPartialViewNameHere")
@section scripts
{
    <script>
     function enableSpectrum() {
        $(".basic").spectrum({
            color: "#f00",
            change: function (color) {
                $("#basic-log").text("change called: " + color.toHexString());
            }
        });
    }
    // You can put the above method in an external js file as well.

    $(function() {
        if (mySettings.shouldIShowSpectrum)
        {
            enableSpectrum();
        }

    });
    </script>
}

在您的局部视图中，您可以将 mySettings.shouldIShowSpectrum 值设置为 true，以便在呈现页面时启用您的插件。

<h5>My Partial</h5>
<input type='text' class="basic" />
<em id='basic-log'></em>
<script>
    console.log("going to enable the plugin");
    var mySettings = mySettings || {};
    mySettings.shouldIShowSpectrum = true;
</script>

【讨论】：