如何将JavaScript应用于手风琴内部的局部视图？

Question

我有一个看起来像这样的cshtml：

<script>
    $(function () {
        $("#accordion").accordion();

    });

</script>
<div id="accordion">
    <h3 id="report1">Report1</h3>
    <div>

        @Html.Partial("~/Views/Settings/SControl.cshtml")


    </div>
    <h3 id="report2">Report2</h3>
    <div>

        @Html.Partial("~/Views/Settings/SControl.cshtml")

    </div>
</div>

我的SControl.cshtml如下所示：我在此cshtml中包含一个外部javascript文件

<script src="~/Scripts/App/pages/SControl.js" type="text/javascript"></script>

<table>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td style="left:0.01em;">
            <span style="font-weight:bold;font-size:x-small;">Run Mode</span><div>
                <select id="Mode" onchange="SubmitMode(this)">
                    <option selected="selected" value="1">Run Continuosly</option>
                    <option value="2">Run on Schedule</option>
                </select>
                <br />

            </div>
        </td>
        <td>
            <span style="font-weight:bold;font-size:x-small;">Reccurence:</span><div>
                <select id="Recurrance" onchange="ChangeRecurrance(this)">
                    <option selected="selected" value="1">On Time Job</option>
                    <option value="2">Reccurring Job</option>
                </select>
                <br />

            </div>
        </td>
</table>

类似的标记在cshtml页面中继续。 但是这些脚本仅应用于手风琴的第一个标题。 尽管在所有手风琴标题中都调用了相同的局部视图，而在所有这些局部视图中都调用了相同的javascript文件，但只有第一个标题会获得脚本。 如何解决这个问题。 请帮我

外部js文件如下：

$(function () {

    document.getElementById("Recurrance").disabled = true;
    document.getElementById("starttime").disabled = true;
    document.getElementById("endtime").disabled = true;
    document.getElementById("divnoenddate").disabled = true;
    $('#noenddate').prop('disabled', true);
    document.getElementById("RecurEvery").disabled = true;

    $(".date-picker").datetimepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "-100:+0",
        dateFormat: 'dd-M-yy',
        controlType: 'select',
        timeFormat: 'hh:mm tt',
        showTime: false,
        showMinute: false,
        showMillisec: false,
        showMicrosec: false,
        showTimezone: false
    });
});
function ChangeCheckBox() {
    if (document.getElementById("Mode").value != 1) {
        debugger;
        if (document.getElementById('noenddate').checked == true) {
            document.getElementById("endtime").disabled = true;
        }
        else {
            document.getElementById("endtime").disabled = false;
            document.getElementById("endtime").value = "";
        }
    }
}

Answer 1

我认为script在加载Partial view之前适用于页面。 加载后需要应用script 。 完成所有html标记和脚本后，可以在JavaScript中使用readyState进行申请，如下所示：

document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        // your code
    }
}

编辑

我创建了一个与您的项目相似的新项目，并添加了cshtmls and js 。 您的外部js适用于SControl.cshtml 。 例如， Recurrance div添加了disabled属性（请参见下图）。

我认为外部js代码不正确，并且有如下图所示的错误：