Question

我正在为学校开设网站，目前正在实施某种管理信息中心。为此，我决定动态地将“模块”（实际上只是.php文件）加载到一个设计用于保存它们的div中。

这适用于不依赖于特定js文件的模块，但有一个需要'participation.js'文件。

我在整个窗口中测试了模块，其中body指令上有'onload =“initSelectable（）”'，但是在管理仪表板中加载模块时调用此函数不会执行任何操作。

这是participant.js的内容（它只是从JQuery selectable中复制/粘贴，我稍微修改了行为）：

var selectedPlayerIDs = [];

function initSelectable(){
    $('#selectable').selectable();
    $('#submitParticipationBtn').hide();
    console.log("initSelectable");

    $("#selectable").selectable({
        stop: function() {
            var count = 8;
            var result = $("#selectedPlayersCount").empty();
            $(".ui-selected", this).each(function() {
                count--;
                selectedPlayerIDs.push($(this).attr("data-playerid"));
            });
            if(count > 1)
                $('#selectedPlayersCount').html(count + " more players");
            else if(count === 1)
                $('#selectedPlayersCount').html(count + " more player");
            else if(count === 0)
                $('#selectedPlayersCount').html("no more player. You're good to go !");
            else if(count === -1)
                $('#selectedPlayersCount').html(-count + " player less");
            else
                $('#selectedPlayersCount').html(-count + " players less");
            if(count === 0)
                $('#submitParticipationBtn').show();
            else
                $('#submitParticipationBtn').hide();
        }
    });
}

function submitParticipation(){
    alert( "JS loaded" );
    $.post("participation.php", {selectedIDs : JSON.stringify(selectedPlayerIDs)}, function() {

    })
    .onSuccess(function() {
        alert( "onSuccess" );
    })
    .fail(function() {
        alert( "error" );
    });
}

所以基本上这段代码初始化了JQuery Selectable环境。在div中加载模块时，我会直接使用$('#dynamicPage').hide().load("module1.php").fadeIn('500');，然后使用$.getScript("participation.js");

问题是，模块正确加载（至少是HTML部分），我可以在控制台日志中看到（“initSelectable”）。但我需要从命令手动重新执行initSelectable（）才能生效。当我这样做时，我看到在第二个（“initSelectable”）日志之前有一个undefined登录控制台（这可能是因为我试图调用$('#selectable').selectable();第二次）。

例如，这是参与模块.php文件：

<div class="well">
    <h3>Create a participation</h3>
    <h4>Please select <span id="selectedPlayersCount">8 players</span></h4>
    <div class="row">
        <div class="col-sm-4">
            <ol id="selectable">
                <?php include_once "../Ctrl/rankingList.php" ?>
            </ol>
            <button class="btn btn-success" id="submitParticipationBtn" onclick="submitParticipation()">Submit</button>
        </div>
    </div>
</div>

我尝试了无数种不同的方法来调用initSelectable函数（回调，事件，timeOuts等等），无论如何，即使它被浏览器执行，我仍然需要手动重新执行它它的工作......

所以基本上，我的问题是：

将HTML和相关JS文件加载到div中的正确方法是什么？

Answer 1

将HTML和相关JS文件加载到div中的正确方法是什么？

所以，这将是一个良好的开端，你可以从这里开始。

$(function() {

    $("#myDiv").load("myfile.php", function() {

        console.log("HTML has been injected!");
        //Get dependencies
        $.getScript( "myscript.js" )
        .done(function( script, textStatus ) {
            //Call methods from within myscript.js
            initSelectable();
        })
        .fail(function( jqxhr, settings, exception ) {
            console.log("There was an error!");
        });
    });

    // Remove inline event handler and bind it like below.
    $("#myDiv").on("click", "#submitParticipationBtn", submitParticipation);

    function submitParticipation() {
        //...
        //...
    }
});

我不确定为什么$('#selectable').selectable()被重复。但是，它让你解决：）

Answer 2

好的，所以我做错了。我认为将<script src "path/to/script.js"></script>放在模块文件中并不起作用。但实际上，确实如此，我只需要在JS文件中调用$(document).ready(initSelectable())以确保initSelectable在正确的时间执行。

所以现在我的.php文件看起来像这样：

<div class="well">
    <h3>Create a participation</h3>
    <h4>Please select <span id="selectedPlayersCount">8 players</span></h4>
    <div class="row">
        <div class="col-sm-4">
            <ol id="selectable">
                <?php include_once "../Ctrl/rankingList.php" ?>
            </ol>
            <button class="btn btn-success" id="submitParticipationBtn" onclick="submitParticipation()">Submit</button>
        </div>
    </div>
    <script src="../Ctrl/participation.js"></script>
</div>

感谢大家的帮助：P

JQuery .load（）上的JavaScript函数调用行为不像预期的那样

2 个答案: