jquery函数在页面加载之前启动
[英]jquery function starts before the page is loaded
问题描述
I have a php page, wich hase some external links to js files in the head, and on body I have some selectable elements from jquery(sometimes I do not have them, because thouse elements are generated if the user is login). 
我有一个php页面，它有一些外部链接到头部的js文件，并且在主体上我有一些来自jquery的可选元素（有时我没有它们，因为如果用户登录则生成thouse元素）。 The problem is in the javascript I wrote, I get this error: TypeError: Object [object Object] has no method 'disableSelection'. 问题出在我写的javascript中，我收到此错误：TypeError：Object [object Object]没有方法'disableSelection'。 Even if I put a ".sortable" element in the php, I still get this error. 即使我在php中放了一个“.sortable”元素，我仍然会收到此错误。 In html looks like it has no problem with that and works fine. 在HTML看起来它没有问题，并且工作正常。 The code that gives me the error is this: 给我错误的代码是这样的：
Sorry for my english. 对不起我的英语不好。 I can put the hole code if you want but is too big. 如果你愿意，我可以把孔码放进去，但是太大了。 I think the problem is because the javascript is loading too fast or before of the html is generated.( I tried to put a variable in the js and that function under a if() but is not working) 我认为问题是因为javascript加载速度过快或者生成html之前。（我试图在js中放置一个变量，而if（）下的函数不起作用）
The javascipt(scripturi.js): 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();
}
It's strange that in the html I don't have this problem. 奇怪的是，在HTML中我没有这个问题。 After the user is logedin I want to call a function that will append some ul (.selectable) elements but so far it can't even notice that there are some elements. 在用户使用之后我想调用一个附加一些ul（.selectable）元素的函数，但到目前为止它甚至都没有注意到有一些元素。 If you want I can give you a link to the page I work. 如果你愿意，我可以给你一个我工作的页面的链接。
A little bit of the php: 一点点的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>
3 个解决方案
解决方案1
1 2013-06-01 13:13:16
You need to place the jQuery code in the $(document).ready(); 您需要将jQuery代码放在$（document）.ready（）; function and then it will run only when the page loads like so: 函数，然后它只会在页面加载时运行：
$(document).ready(function() {
// your code here
});
This will make sure it only runs when the page and all the DOM elements have completely loaded. 这将确保它仅在页面和所有DOM元素已完全加载时运行。
UPDATE: 更新：
Can you add the following code in your HTML head section as you need jQuery UI to make the relevant method call: 您是否可以在HTML头部分中添加以下代码，因为您需要jQuery UI来进行相关的方法调用：
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Make sure you include it after you have loaded jQuery, so the head section code should be like: 确保在加载jQuery后包含它，因此head部分代码应如下所示：
<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>
First thing is to make sure you have jQueryUI loaded since the method you are calling belongs to its API. 首先要确保你加载了jQueryUI，因为你调用的方法属于它的API。 We can take things forward from there! 我们可以从那里开始前进！
解决方案2
0 2013-06-01 13:30:31
Your code does not include jquery ui anywhere! 你的代码在任何地方都不包含jquery ui！ You just include JQuery, not the JQuery UI part. 你只需要包含JQuery，而不是JQuery UI部分。 The Sortable is part of the jquery ui. Sortable是jquery ui的一部分。 Check it out at: http://jqueryui.com/sortable/ If you include it correctly it is not problem if you have a element on your page which responds to the selector or not. 请查看： http ： //jqueryui.com/sortable/如果正确包含它，如果您的页面上有一个响应选择器的元素，则没有问题。 Just make sure, that you include the correct library. 只需确保您包含正确的库。
解决方案3
0 2013-06-01 13:30:48
You need to add jQueryUI. 您需要添加jQueryUI。 Please add below code to after jquery section. 请在jquery部分之后添加以下代码。
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.