Bootstrap-toggle按钮在部分视图中无法正常工作

Question

Boostrap切换按钮在部分视图上加载后在第一次尝试中不起作用，但在第二次尝试中起作用

[当我单击下拉菜单的第一条记录时，切换按钮不起作用，当我单击第二条记录时，该切换按钮起作用，而在第三条记录中，该按钮不起作用。但是，如果我重新加载页面并单击第二条记录，它什么也不会做；如果我单击第一条记录，它会神奇地起作用。有任何建议！

<select name="speed" onchange="showCharts(this)" style="outline: none ;width: 
        100%;border-radius: 3px; height: 35px;color: darkgray;padding-left: 
        5px; border: 0.1em solid lightgray;">
    <option disabled selected>Type of Chart</option>
    <option value="1">First Record</option>
    <option value="2">SecondRecord</option>
    <option value="3">Third Record</option>

</select>

<div class=" " id="collapseOne"></div>

    function showCharts(s) {
        switch (s[s.selectedIndex].value) {
            case "1":
                 $('#collapseOne').load('@Url.Action("1record", "Home")');
                break;
            case "2":
                 $('#collapseOne').load('@Url.Action("2record", "Home")');
                break;
            case "3":
                 $('#collapseOne').load('@Url.Action("3record", "Home")');
                break;
        }
}

        [HttpGet]
        public ActionResult 1record()
        {
            return PartialView();
        }

        [HttpGet]
        public ActionResult 2record()
        {
            return PartialView();
        }

        [HttpGet]
        public ActionResult 3record()
        {
            return PartialView();
        }

@{
    ViewData["Title"] = "# Record";

}

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox" checked data-toggle="toggle"> 

Answer 1

没关系，我做了一个解决方法，仅向JavaScript之类的按钮添加部分视图，例如：

function showCharts(s) {
    switch (s[s.selectedIndex].value) {
        case "1":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
             $('#collapseOne').load('@Url.Action("1record", "Home")');
            break;
        case "2":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
             $('#collapseOne').load('@Url.Action("2record", "Home")');
            break;
        case "3":
             $('#collapseOne').load('@Url.Action("empty", "Home")');
            $('#collapseOne').load('@Url.Action("3record", "Home")');
            break;
    }
}

仅使用一个切换按钮创建局部视图然后将局部视图添加到您的控制器中
    [HttpGet]
    public ActionResult empty()
    {
        return PartialView();
    }