我正在做一个便利贴网站，用户可以在上面张贴消息等。我使用jQuery UI与PHP。我希望使用AJAX，使其响应，但我有一些问题，通过AJAX页面更新。
主要问题是我的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>
<?}?>
当Ajax调用返回时，您设置
$("#result").html(data);
但是在result-div中有一个新的html，它不再是可拖动的。在Ajax调用之后，您应该执行javascript以使内容再次可拖动。