javascript - 在 html 部分 View 中以模式显示 dataTable 时出现问题

Question

我昨天在这里问了一个关于这个问题的问题，但被否决了，可能是因为我没有包含任何可以理解的代码。

希望这个问题能更完整，让您更轻松地帮助我。

所以我有 3 个 View 正在播放:

学生名单

脚本

@{
ViewBag.Title = "StudentsList";
Layout = "~/Views/Shared/_LayoutM.cshtml";
}
@Scripts.Render("~/Scripts/charts")
@Styles.Render("~/Content/formsaltcss")
@model Mvc.Models.StudentViewModel
<script type="text/javascript">
$(document).ready(function () {
    $('#AddStudentData').click(function () {
        var type = 'student';
        var id = 0;

        $('#holderArea').html('');
        if (!$('#studentDropDown option:selected').length) {
            ToastrWarning('Please select a student before running the report');
            return;
        }
        id = $('#studentDropDown').val();

        var data = { id: id };

        $.ajax({
            url: '/Student/StudentAnalysisFiltered',
            async: false,   
            data: data,
            dataType: 'html',
            success: function (data) {
                $('#holderArea').html(data);
            }
        });
    });
});

相关 HTML

                                <div class="panel panel-default">
                                <div class="panel-heading">
                                <h3 class="margin-bottom0 text-center">Student Analysis</h3></div>


                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="col-sm-2 control-label">Student Name</label>
                                                        <div class="col-sm-4">
                                                            @Html.DropDownListFor(c => c.Students, new SelectList(Model.Students, "StudentID", "Name"), "Choose Student"
    , new { id = "studentDropDown", @class = "form-control input-sm", data_width = "100%" })
                                                        </div>
                                                        <div class="col-sm-offset-2 col-sm-10">
                                                            <button id="AddStudentData" type="button" class="btn btn-sm btn-primary">Select</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="holderArea">
                            </div>

学生分析已选择脚本

@using Data
@using Mvc.Helpers
@model Mvc.Models.StudentViewModel
@Scripts.Render("~/Scripts/datatables")
<script>
    function StudentScoresModal(studentID, answer, result) {
        $('#scoresTable').hide();
        $('#scoresSpinner').show();
        $('#scoresModal').modal('show');

        var testID = @Html.Raw(Model.testID );

        $.ajax({
            cache: false,
            url: "/Student/StudentScoresDrillthrough",
            data: { 'studentID': studentID, 'answer': answer, 'result': result, 'testID': testID},
            success: function (data) {
                $('#scoresTable').html(data);
                $('#scoresTable').show();
                $('#scoresSpinner').hide();
            },
            error: function () {
                toastr.options.positionClass = 'toast-bottom-right';
                toastr.options.backgroundpositionClass = 'toast-bottom-right';
                toastr.options.timeOut = 3000;
                toastr.error('Unable to get student results.');
            }
        });
    }
</script>

相关 HTML

    <div id="holderArea">
    <button type="button" class="btn btn-sm btn-primary" onclick="StudentScoresModal(id, '', '')" id="@q.StudentID">View Scores</button>
</div>

    <div class="modal in modal-stack" id="scoresModal" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><strong>Student Scores</strong></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="table-responsive" id="scoresTable" style="display:none">
                            </div>
                            <div class="sk-cube-grid absolute-center top-85" id="scoresSpinner" style="display:none">
                                <div class="sk-cube sk-cube1"></div>
                                <div class="sk-cube sk-cube2"></div>
                                <div class="sk-cube sk-cube3"></div>
                                <div class="sk-cube sk-cube4"></div>
                                <div class="sk-cube sk-cube5"></div>
                                <div class="sk-cube sk-cube6"></div>
                                <div class="sk-cube sk-cube7"></div>
                                <div class="sk-cube sk-cube8"></div>
                                <div class="sk-cube sk-cube9"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

学生分数部分

脚本

<script>
    $(document).ready(function () {
        $('#studentScores').dataTable({
            "data": @Html.Raw(Model.StudentScoresJson),
            "columns":[
                        { "sName": "StudentID" },
                        { "sName": "Answer" },
                        { "sName": "Result" }
            ]
        });
    });
</script>

HTML

<table id="studentScores" class="display table table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>StudentID</th>
            <th>Answer</th>
            <th>Result</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>User</th>
            <th>Answer</th>
            <th>Response</th>
        </tr>
    </tfoot>
    <tbody></tbody>
</table>

这一切是如何运作的

在“学生列表” View 上有一个包含学生列表的下拉菜单，以及一个用于筛选个人的“选择”按钮。 OnClick 会清除holderArea div 并将studentID 传递给 Controller ​​方法，该方法返回分部 View “StudentAnalysisSelected”并将其放置在holderArea div 内。

现在，图表中已加载了特定于个人的详细信息。单击时，“scoresTable”将隐藏并显示模态，并且通过 Controller 对 StudentScoresDrill 进行 ajax 调用，该 Controller 返回放置在“scoresTable”的 html 中的“StudentScores”部分。

问题

现在，当我第一次按学生过滤时，这一切都完美运行。我单击“选择”，图表加载，我单击图表，数据表在模式中整齐地显示。

但是，由于我不知道的原因，当我再次单击“选择”重新过滤，然后单击加载的图表时，我看到的只是加载微调器中出现的模式，并且它停在那里。控制台中没有与数据表相关的错误，也没有任何异常情况。

我很欣赏这篇文章的阅读量，但我很想听听关于可能导致我的问题的任何想法。

谢谢!

Answer 1

这是因为您的 dom 已重新加载，因此您丢失了附加的事件。如果您像这样附加 ypur 事件，则应该这样做，see doc :

$('#AddStudentData').on('click',function () {});