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

【问题标题】：display form on mouse click on table elements using jquery使用jquery在鼠标单击表格元素时显示表单
【发布时间】：2011-09-26 05:38:44
【问题描述】：

我正在使用 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>

更多解释---- 单击任何 td 单元格时，id 为“myform”的 div 标记应显示.. 带有动画

【问题讨论】：

标签： jquery forms dynamic show

【解决方案1】：

您的setTimout 函数引用了$that，但您在该范围内没有这样的东西：

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;
}

现场演示：http://jsfiddle.net/ambiguous/dWYfD/

【讨论】：