使用jquery在表元素上单击鼠标显示表单_Jquery_Forms_Dynamic_Show

使用jquery在表元素上单击鼠标显示表单

jquery forms dynamic

使用jquery在表元素上单击鼠标显示表单,jquery,forms,dynamic,show,Jquery,Forms,Dynamic,Show,我正在使用jquery做以下事情- 我需要在单击的表格单元格旁边显示表单，并带有一些动画我的代码的问题是表单只显示一次，然后再单击鼠标就不会显示了代码是- <script type="text/javascript"> $(document).ready(function(){ $("td").click( function(event) { var div = $("#myform"); div.css( { position:"absolute",

我正在使用jquery做以下事情-

我需要在单击的表格单元格旁边显示表单，并带有一些动画

我的代码的问题是表单只显示一次，然后再单击鼠标就不会显示了

代码是-

<script type="text/javascript">
$(document).ready(function(){

$("td").click( function(event) {
  var div = $("#myform");
  div.css( {
      position:"absolute", 
      top:event.pageY, 
      left: event.pageX});

  var delayTimer = setTimeout( function( ) {
        $that.fadeIn( "slow");
     }, 100);

  div.mouseover( function( event) {
     if (delayTimer)
         clearTimeout( delayTimer);
  }).mouseout( function(){
     if (delayTimer)
         clearTimeout( delayTimer);
     var $that = $(this);
     delayTimer = setTimeout( function( ) {
        $that.fadeOut( "slow");
     }, 500)         
  });
});
});
</script>
</head>

<body>
<table width="600" border="2" cellpadding="4">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="myform">
<form>
<input type="text" value="Arjun"/>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>


$（文档）.ready（函数（）{
$（“td”）。单击（功能（事件）{
var div=$（“#myform”）；
div.css（{
位置：“绝对”，
顶部：event.pageY，
左：event.pageX}）；
var delayTimer=setTimeout（函数（）{
$that.fadeIn（“慢”）；
}, 100);
div.mouseover（函数（事件）{
if（延迟计时器）
clearTimeout（延迟计时器）；
}).mouseout（函数（）{
if（延迟计时器）
clearTimeout（延迟计时器）；
var$that=$（this）；
delayTimer=setTimeout（函数（）{
$that.fadeOut（“慢”）；
}, 500)         
});
});
});

更多解释--

单击任何td单元格时，应显示id为“myform”的div标记。。对于动画

您的

设置超时

函数引用了

$该

，但您在该范围内没有这样的功能：

var delayTimer = setTimeout( function( ) {
    $that.fadeIn( "slow"); // No $that exists here
}, 100);

我想你的意思是说

div.fadeIn

：

var delayTimer = setTimeout(function() {
    div.fadeIn("slow");
}, 100);

您还应在淡入前将

display:none

设置在

div

上，否则淡入将不起任何作用：

div.css({
    position: "absolute",
    top: event.pageY,
    left: event.pageX,
    display: 'none'
});

并在CSS中初始化它：

#myform {
    display: none;
}

现场演示：