将类名添加到使用AJAX和PHP数组生成的范围

我无法理解为什么这种情况会持续下去.

我有一些存储在数组中的单词:

$poolOne=array("sparkly","sporty","happy","confident","awesome","funny","awkward","mad","silly","dynamic",
    "handsome","merry","horrid","funky","loud","chirpy","posh","clever","pretty","athletic");

对此数组的调用会选择四个随机字并将其输出到a中

".$poolOne[$key]."";
}?>

为了生成一个新的随机四个单词集而不刷新页面,我使用了一个非常简单的AJAX调用,只重新加载该部分,并为您提供一组新的四个单词.

你可以在这里看到这个,页面加载div中的代码wordbank,然后当运行AJAX(onClick绿色按钮)时,它再次从一个名为的文件加载相同的PHPwordbank.php

http://francesca-designed.me/create-a-status/index.php

这是标准的AJAX调用,没什么特别之处:

function refreshWords()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("wordbank").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","wordbank.php",true);
xmlhttp.send();
}

这一切都很好,你可以在上面的链接上看到.

但是下一步,我想使用jQuery UI来实现拖放的单词.这一步的第一步是将spans我的每个单词都放在一个类中,draggable这样jQuery可以做到这一点.但这是我遇到问题的地方.

一旦我添加class="draggable"到PHP调用,整个事情就会中断.

为什么只是简单地为这个调用添加一个类名呢？

这里没有

echo "".$poolOne[$key]."";

在这里

echo "".$poolOne[$key]."";

添加此类名称,整个页面变为kaboom.我收到服务器错误500

这是我复制的网站版本,只添加了可拖动的类,没有别的.你可以看到它根本不起作用.

我无法理解为什么添加一个简单的类名会破坏我的整个页面？

版本被打破:http://francesca-designed.me/create-a-status/index2.php