Question

我正在做一个便利贴纸网站，用户可以将msg等发布到便条纸上。我正在使用PHP的jQuery UI。我希望使用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>
<?}?>

Answer 1

当Ajax调用返回时，设置

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

但是结果div中有新的html，它不再可拖动了。在Ajax调用之后，您应该执行javascript以使事物再次可拖动。

jQuery仅在用户第一次进入网站时才有效

1 个答案: