部分視圖中的JavaScript元素格式，但不起作用

Question

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

我正在嘗試將顏色選擇器包含在局部視圖中。

Answer 1

您實際上無法在局部視圖中調用腳本部分並在那里執行此方法。 那是設計上的。 請看Darin的帖子

您可以做的是，將此方法保留在主視圖中。 如果需要，您仍然可以從局部視圖中有條件地執行此操作。

所以在你的主視圖中

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