[英]JavaScript function call on JQuery .load() doesn't behave like expected
我正在为学校的网站工作,目前正在实施某种管理仪表板。 为此,我决定动态地将“模块”(实际上只是.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();
这一事实$('#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中的正确方法是什么?
所以,这将是一个良好的开端,你可以从这里开始。
$(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()
正在重复。 但是,它让你解决:)
好的,所以我做错了。 我认为将<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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.