Jquery 滑动切换并单击事件在新元素上不起作用

为什么第二次单击时它不关闭表行

$（“tr”）。在（'click'，function（）上{
$（“表”）.find（“.new element”）.remove（）；
设el=$（此）；
var new_elements=“
”+
“
项目1:content1
”+
“
项目2:content2
”+
“
”；
$（el）.之后（新元素）；
$（el）.next（）.slideToggle（“slow”）；//新元素的平均值
});
表格{
边界塌陷：塌陷；
}
保险商实验室{
列表样式：无；
文本对齐：居中；
}
.显示无{
显示：无；
}

名称
家庭
总和
烤箱
雅克
烤箱
您不能为
tr
设置动画。。。遗憾的是，这是一个无法设置动画的元素

但是您可以设置内部
div
的动画。见下文：


$（“tr”）。在（'click'，函数（）{
$（“表”）.find（“.new element”）.remove（）；
设el=$（此）；
var new_elements=“
”
+“
项目1:content1
”
+“
项目2:content2
”
+“
”；
el.之后（新元素）；
el.next（）.find（“div”）.slideToggle（“slow”）；//新元素的方法
});
表格{
边界塌陷：塌陷；
}
保险商实验室{
列表样式：无；
文本对齐：居中；
}
.显示无{
显示：无；
}

名称
家庭
总和
烤箱
雅克
烤箱
好吧，因为你从来不关它；）

单击同一项目时，该项目将通过以下方式删除：

$("table").find(".new-element").remove();

让我回想一下：

let el = $(this);
var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
"<li><label>item1: </label><span>content1</span></li>" +
"<li><label>item2: </label><span>content2</span></li>" +
"</ul></div></td></tr>";
$(el).after(new_elements);
$(el).next().slideToggle("slow"); 

切换处于活动状态时：

$("table").find(".new-element").remove();
var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
"<li><label>item1: </label><span>content1</span></li>" +
"<li><label>item2: </label><span>content2</span></li>" +
"</ul></div></td></tr>"; 
$(this).after(new_elements);
$(this).next().show();
$('.new-element').find("div").slideToggle('slow');

$（“表”）.find（“.new element”）.remove（）；
var new_elements=“
”+
“
项目1:content1
”+
“
项目2:content2
”+
“
”；
$（此）.after（新元素）；
$（this.next（）.show（）；
$（'.new element'）.find（“div”）.slideToggle（“slow”）；

这是一个非常快速的关闭切换：


这也消除了检查单击的项目是否与上次相同的需要，因此可以删除返回false
 PS:
let el=$（这是）无需再次将jQuery包装到jQuery
$（el）
。仅使用
el
。或者，如果您想注意el实际上是一个jQuery ref，那么可以使用
$el
作为变量名。在第一种情况下，在切换生效之前，我使用return false退出执行，并避免在删除元素后将其放回，我在回复中写道。。然后我意识到修复切换也很容易，于是我编辑了第一个回复。。如果你从未读过第一个回复，我想故事会变得有点模糊。很抱歉。
$("table").find(".new-element").remove();
var new_elements = "<tr class='new-element display-none'><td colspan='2'><div><ul>" +
"<li><label>item1: </label><span>content1</span></li>" +
"<li><label>item2: </label><span>content2</span></li>" +
"</ul></div></td></tr>"; 
$(this).after(new_elements);
$(this).next().show();
$('.new-element').find("div").slideToggle('slow');