如何将javascript应用于手风琴中调用的局部视图？

I have a cshtml which looks like this:

我有一个看起来像这样的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>

My SControl.cshtml looks like below: I have included an external javascript file in this cshtml

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

The similar tags are continued in the cshtml page. But the scripts are applied only to the first header of accordion. Though the same partial view is called in all accordion header and same javascript file is called in all these partial views, only the first header gets the scripts. How to address this issue. Please help me

类似的标签在cshtml页面中继续。但脚本仅适用于手风琴的第一个标题。虽然在所有手风琴标题中调用相同的局部视图,并且在所有这些局部视图中调用相同的javascript文件,但只有第一个标题获取脚本。如何解决这个问题。请帮帮我

The external js file is as follows:

外部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 = "";
        }
    }
}

1 个解决方案

#1

I think script apply in page before load Partial view. You need apply script after load it. You can use readyState in JavaScript for apply after complete all html tags and scripts like this:

我认为脚本在加载部分视图之前应用于页面。加载后需要应用脚本。在完成所有html标记和脚本之后,您可以在JavaScript中使用readyState进行应用:

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

Edit

I created new project similar to your project and add cshtmls and js. Your external js apply to SControl.cshtml. For example, Recurrancediv added disabled attribute (see below image).

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

I think external js code is incorrect and has error like below image:

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

#1