Jquery函数在页面加载之前启动
jquery function starts before the page is loaded
我有一个php页面，在头部有一些外部链接到js文件，在身体上我有一些来自jquery的可选元素(有时我没有它们，因为如果用户是登录的，就会生成这些元素)。问题是在我写的javascript中，我得到这个错误:TypeError: Object [Object Object]没有方法'disableSelection'。即使我加了个"。元素，我仍然得到这个错误。在html中，它看起来没有问题，工作得很好。给我这个错误的代码是:
对不起，我的英语不好。如果你想的话，我可以把洞码放进去，但是太大了。我认为这个问题是因为javascript加载太快或html生成之前。(我试图把一个变量在js和函数下的if()，但不工作)javascipt (scripturi.js):
var logat=0;
$(document).ready(function() {
$( ".sortable0" ).sortable();
$( ".sortable0" ).disableSelection();
$( ".sortableIt" ).disableSelection();
$( ".sortableIt" ).sortable(
{
stop: function(event, ui)
{
for(var i=0;i<ui.item.parent().children().length;i++)
{
var x =ui.item.parent().children()[i].id;
//update items din acest sertar
//updateItemServer(x,i)
//alert(x+ " " + i);
}
}
});
$( ".sortable" ).disableSelection();
$( ".sortable" ).sortable({ stop: function(event, ui) {reparaZindex();}});
});
function updateItemServer(x,i){
//alert(x+" "+i);
}
function incarca(){
$(document).ready(function (){
$.getJSON("http://students.info.uaic.ro/~calin.chifan/api/compartiment/list.json", function(data){
var html = [];
/* loop through array */
$.each(data, function(index, d){
addCompartiment(d.nume_comp,d.id);
});
}).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
alert("error occurred!");
});
});
}
function addCompartiment(nume,id){
$("#sortable0").append('<ul class="sortable" id'+ +'>');
}
function updateIndexServer(x,y){
//alert(x+" "+y);
//trimite id-ul x si pozitia y
}
function reparaZindex(){
$.each($(".sortable > li"), function()
{
if($(this).find('.sertar')[0])
{
$(this).find('.sertar').eq(0).css('z-index',(500-$(this).index()*2));
updateIndexServer($(this).find('.sertar')[0].id,$(this).index())
}
if($(this).find('.sortableIt')[0])
$(this).find('.sortableIt').eq(0).css('z-index',(501-2*$(this).index()));
});
}
window.onload = function() {
//incarca();
//reparaZindex();
}
很奇怪，在html中我没有这个问题。在用户登录后，我想调用一个函数，它将添加一些ul (.selectable)元素，但到目前为止，它甚至不能注意到有一些元素。如果你想的话，我可以给你一个链接到我工作的页面。
一小段php:
<?php
ini_set('session.save_path', '/tmp/');
session_start();
$logged=0;
if(isset($_SESSION['autentificat']))
{
if($_SESSION['autentificat']==1)
$logged=1;
}
$user= $_COOKIE['user'];
echo'
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
<title>Proiect Web</title>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
</head>'
;
if($logged==1)
{
echo'<body onload="loadYeslog()">';
}
else {
echo'<body onload="loadNoLog()">';
}
echo
'<div class="mainbar">
<div id="loginContainer">
<div id="loginButton"><span style="display:block;width:48px;height:27px; ">Login</span></div>
<div id="logoutButton" class="barbutton" style"cursor:pointer;"><span>Logout</span></div>';
if($logged==0)
{
echo'<div id="welcomeLabel" class="barbutton"><span>Not Logged in!</span></div>';
}
else
{
echo '<div id="welcomeLabel" class="barbutton"><span>Welcome '.$user.' !</span></div>';
}
echo '<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm" action="autentificare2.php" method="POST">
<fieldset id="body">
<fieldset>
<label for="username">
Username</label>
<input type="text" name="user"/>
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password"/>
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span><a href="recovery.php" style="color: white;">Forgot your password?</a></span>
<div id="regbut"><span>New user ? </span></div>
</form>
</div>
<div id="regbox">
<form id="registerform" action="register.php" method="POST">
<table style="margin-top:10px;">
<label for="Dusername">
REGISTAR FOARM!!! </label>
<tr>
<td>
<label for="Dusername">
Username: </label>
</td>
<td>';
?>
<input type="text" name="Duser" placeholder="Introduceti numele de cont dorit" onblur="javascript:semnaleazaExistaNume (this.value, '')" />
</td>
<td>
<span class="ascuns" id="eroareNume">Numele deja exista, alegeti altul... </span>
</td>
</tr>
<tr>
<td>
<label for="Dpassword">
Password: </label>
</td>
<td>
<input type="password" name="Dpassword"/>
</td>
</tr>
<tr>
<td>
<label for="Demail">
E-Mail: </label>
</td>
<td>
<input type="text" name="Demail"/>
</td>
</tr>
<tr>
<td>
<input type="submit" id="register" value="Register" />
</td>
</tr>
</fieldset>
</table>
</form>
</div>
</div>
</div>
<div class="box">
<ul class="sortable0" id="sortable0">
<ul class="sortable" id="sortableColona1">
<li id="sertar1" style="z-index:10">
<img id="sertar11" class="sertar" ONCLICK="openS(this)" style="position: relative;z-index:500;aligh:center;" src="img/sertar1.png">
<ul id="ui items1" style="z-index:501;position:relative;visibility:hidden;" class="sortableIt" >
<li id="item1" class="ui-state-default">1</li>
<li id="item2" class="ui-state-default">2</li>
<li id="item3" class="ui-state-default">3</li>
<li id="item4" class="ui-state-default">4</li>
<li id="item5" class="ui-state-default">5</li>
<li id="item6" class="ui-state-default">6</li>
<li id="item7" class="ui-state-default">7</li>
<li id="item8" class="ui-state-default">8</li>
<li id="item9" class="ui-state-default">9</li>
<li id="item10" class="ui-state-default">10</li>
<li id="item11" class="ui-state-default">11</li>
<li id="item12" class="ui-state-default">12</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
你需要把jQuery代码放在$(document).ready();函数，然后它将只在页面加载时运行，如下所示:
$(document).ready(function() {
// your code here
});
这将确保它只在页面和所有DOM元素完全加载时运行。
更新:
你可以在你的HTML头部部分添加以下代码，因为你需要jQuery UI来进行相关的方法调用:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
确保在加载jQuery后包含它，所以头部部分代码应该是这样的:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="login.js"></script>
<script src="scripturi.js"></script>
<script src="dulap.js"></script>
<script src="login.js"></script>
首先要确保你已经加载了jQueryUI，因为你调用的方法属于它的API。我们可以继续向前发展!
你的代码没有包含jquery ui !您只包含JQuery，而不是JQuery UI部分。Sortable是jquery ui的一部分。检查它在:http://jqueryui.com/sortable/如果你正确地包括它是没有问题的，如果你有一个元素在你的页面上响应选择器或没有。请确保您包含了正确的库。
您需要添加jQueryUI。请在jquery部分后面添加以下代码。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
相关文章：
- 如何防止网页加载后自动启动功能
- 在页面启动期间加载图像
- Jquery时间启动计时器，我有一个计时器的代码，但它在页面加载时启动
- 在呈现HTML样式和脚本时加载启动页
- 启动选项卡ajax在加载页面时加载内容
- 初次加载后关闭启动屏幕
- 在 Metro 风格应用中启动时加载数据
- 使用Bookmarklet在Firefox中为asp表单加载启动onclick事件
- 模式视图重新加载内容(启动MVC ASP.NET）
- 视频(自动播放）通过javascript隐藏，但已经在页面加载时启动
- 加载图像后启动转换事件
- 当窗口打开时，IE9在加载前启动事件
- Mozilla Firefox加载项将不会启动
- FileReader未在Ionic 2中加载端启动
- 如何在 Rails 中停止在页面重新加载时重新启动计时器
- TineMCE 不会启动 ajax 加载的文本区域
- JavaScript 在应用程序首次启动时不会加载
- JavaScript - 在启动(加载）时隐藏 Div
- 页面准备不在ajax上启动加载更多的帖子
- 为什么Soundmanager 2没有在firefox中启动加载事件(23）
