Почему не срабатывает событие mouseleave?

Question

[CheNet]

HTML
Есть таблица в 9 строк и 3 столбца. Задача, при наведении мышки на строку, вставить вместо 3-х столбцов, один с кнопкой на всю ширину. И соответственно, когда мышка уходит, восстановить первоначальный вид строки.

<table>
      <tbody>
             <tr>
                  <td>столбец 1</td>
                  <td>столбец 2</td>
                  <td>столбец 3</td>
            </tr>
            ...
      </tbody>
</table>

JQUERY

$(document).ready(function() {
	$(document).on('mouseenter', 'tbody > tr', function() {
		$(this).children().remove();
		$(this).append('<td colspan="3">enter</td>');
	});

	$(document).on('mouseleave', 'tbody > tr', function() {
		$(this).children().remove();
		$(this).append('<td colspan="3">leave</td>')
	});
});

при этом, mouseenter срабатывает, и появляется столбец на всю ширину, с текстом enter внутри. Но при отводе мышки, mouseleave не работает, и строка остается в измененном виде.

ПС: код тестовый, поэтому нету кнопки и т.д.

Comments

[CheNet]

Небольшое дополнение. Если убрать colspan='3', т.е. делать новый столбец не на всю ширину, то все работает. Такое ощущение, что новый td экранирует то, что находится под ним.

Answer 1

[Ankhena]

https://jsfiddle.net/8wd0zLvy/

$(document).ready(function() {
  $(document).on('mouseenter', 'tbody > tr', function() {
    $(this).find('td').addClass('hide');
    $(this).append('<td colspan="3" id="new">enter</td>')
  });

  $(document).on('mouseleave', 'tbody > tr', function() {
   $(this).find('td').removeClass('hide');
   $("#new").remove();
  });
});

.hide {
  display: none;
}