отображение формы при щелчке мышью по элементам таблицы с использованием jquery - PullRequest
Новая
       21

отображение формы при щелчке мышью по элементам таблицы с использованием jquery

0 голосов
/ 26 сентября 2011

Я использую 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 должен отображаться тег div с идентификатором «myform» .. с анимацией

1 Ответ

2 голосов
/ 26 сентября 2011

Ваша 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/

...