javascript - 如何将javascript应用于 Accordion 内部调用的局部 View ？

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页面中继续。但这些脚本仅适用于 Accordion 的第一个标题。尽管在所有 Accordion header 中调用相同的部分 View ，并且在所有这些部分 View 中调用相同的 javascript 文件，但只有第一个 header 获取脚本。如何解决这个问题。请帮助我

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

我认为脚本在加载部分 View 之前应用于页面。您需要在加载后应用脚本。在完成所有 html 标签和脚本后，您可以在 JavaScript 中使用 readyState 进行应用，如下所示:

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

编辑

我创建了与您的项目类似的新项目，并添加了 cshtmls 和 js。您的外部 js 适用于 SControl.cshtml。例如，Recurrancediv 添加了 disabled 属性(见下图)。

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