jQuery僅在用戶第一次進入網站時才起作用

我正在做一個便箋網站，用戶可以在該網站上發佈消息等來發布便箋。我正在使用PHP的jQuery UI。我希望能夠使用AJAX來使其響應，但在通過ajax更新頁面時遇到了一些問題。jQuery僅在用戶第一次進入網站時才起作用

主要問題是我的jQuery似乎只有當用戶第一次進入網站時，當他們通過表單（和數據庫）添加一些信息我的jQuery UI行爲（即拖放，獲取屬性並使用CSS定位元素）停止工作，直到頁面刷新。這就像我的ajax傳遞新的循環PHP內容，jQuery不再識別我已經應用的.class。

希望這個或我的代碼有意義，我仍然對ajax和編碼一般都不熟悉。

首頁 - pert.php

<html> 
<header> 

<link rel="stylesheet" href="style.css" type="text/css"/> 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/> 


<script type="text/javascript" 
src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" 
src="js/fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript"> 


jQuery(document).ready(function() { 


$("#addtask").submit(function() { 

    //$("#form").serialize(); 

    $.post('update.php', $("#addtask").serialize(),function(data){ 

     $("#result").html(data); 
    }); 

    return false; //stop browser refresh 

    }); 


//looping through Post it Notes to apply to all within class 
$(".task").each(function(index){ 

//store x, y from looped php 
var x = $(this).attr("x"); 
var y = $(this).attr("y"); 

//assign looped php to css 
$(this).css("left",x); 
$(this).css("top",y); 
//attach draggable behaviour 
$(this).draggable({ 
cursor: 'move', 
stack: '.post', 
opacity: '0.5', 
containment: '#container' 
}); 

//store variables x, y and id for database via mouse move and ajax 
$(this).mouseup(function(){ 
var coord=$(this).position(); 
var h = $(this).height(); 
var w = $(this).width();   
var coordLeft = coord.left; 
var coordTop = coord.top; 
var noteid = $(this).attr("taskid"); 




})//loop done 





})//jquery end 

    </script> 
    </header> 

    <body> 





    <h4>Draggable Stickies</h4> 


    <!--<p> Click here to <a class = "addimage" href="addimage.html">Add image</a> </p>--> 
    <form id="addtask"> 
Task Desc:<input type="text" name="taskdesc"/> 
<input type="submit" value="Enter"/> 


    </form> 

    <div id="result"> 

    <? 
    include "connectdb.php"; 
    //looping through stored desc 
    $querySticky=mysql_query("SELECT * FROM tasks"); 
    while($r=mysql_fetch_array($querySticky)){?> 
    <div class="task" x="<? echo $r["x"]; ?>" y="<? echo $r["y"]; ?>" 
    id="<? echo $r["taskid"]; ?>"> 
    x=<? echo $r["x"]; ?> y=<? echo $r["y"]; ?><p><? echo $r["taskdesc"];?></p> 
    </div> 
    <?}?> 


    </div> 


    </body> 




    </html>

訪問數據庫 - update.php

<? include("connectdb.php"); 


if(ISSET($_POST['taskdesc'])){ 



$taskdesc = $_POST['taskdesc']; 


$queryinsert1="INSERT INTO tasks(taskdesc)VALUES('$taskdesc')"; 
$result=mysql_query($queryinsert1); 
} 

    //for updating coordinates in database not in use y 
    if(ISSET($_POST['taskid'])){ 

$x = $_POST['x']; 
$y = $_POST['y']; 
$id = $_POST['taskid']; 


$addxyquery="UPDATE tasks SET x = '$x', y ='$y' WHERE taskid='$id'"; 

$result=mysql_query($addxyquery); 
} 




//looping through stored desc for updated results 
$querySticky=mysql_query("SELECT * FROM tasks"); 
while($r=mysql_fetch_array($querySticky)){?> 
<div class="task" x="<? echo $r["x"]; ?>" y="<? echo $r["y"]; ?>" id="<? echo $r["taskid"]; ?>"> 
x=<? echo $r["x"]; ?> y=<? echo $r["y"]; ?><p><? echo $r["taskdesc"];?></p> 
</div> 
<?}?>

來源

2011-11-23 ChrisSherwood

如果JavaScript突然停止工作，幾乎總是因爲JavaScript代碼中存在錯誤。 JavaScript錯誤控制檯中是否有錯誤？ – JJJ

將所有js放入外部文件並通過JSLint/JSHint運行。它會爲你節省一點時間。 –

當Ajax調用返回時，你設置

$("#result").html(data);

但是接下來在result-div中有一個不可拖動的新html。在Ajax調用之後，您應該執行javascript以使事情再次可拖動。

來源

2011-11-23 20:26:40

感謝球員們感謝答案的速度！將看看我的代碼認爲它是明顯的東西！ – ChrisSherwood

非常感謝您花了3個小時試圖解決這個問題！ – ChrisSherwood

jQuery僅在用戶第一次進入網站時才起作用

回答

相關問題