Javascript 使用.after（）函数添加字段时显示/隐藏不起作用

当我使用jQuery

.after（）

函数添加字段时，显示/隐藏功能对这些字段不起作用

下面是一个JSFIDLE，它演示了这个问题：

显示/隐藏功能适用于第一行，但不适用于在该行之后添加的任何行。我认为页面加载后编写的代码可能是问题所在，但我不确定。如果是这样的话，除了对一定数量的行进行硬编码之外，还有其他解决方法吗

以下是我正在使用的代码：

CSS:

#表{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
边界塌陷：塌陷；
}
#表td，#表th{
字号：1em；
边框：1px实心#98bf21；
填充：3px7px 2px7px；
}
#表th{
字号：1.4em；
文本对齐：左对齐；
垫面：5px；
垫底：4px；
背景色：#A7C942；
颜色：#fff；
}
#表tr.alt td{
颜色：#000；
背景色：#EAF2D3；
}

HTML:

#
原因
1.
-
其他，未列出

jQuery：

var计数2=5；
var表_count2=1；
$（文档）.ready（函数（）{
$（'.cause_details'）.hide（）；
$（'.report_cause'）。更改（函数（）{
if（$（this）.val（）=='other'）{
$（this.parent（）.find（'.cause_details'）.show（）；
}否则{
$（this.parent（）.find（'.cause_details'）.hide（）；
}
});
$（'#btnAdd'）。单击（函数（）{
计数2=计数2+2；
表2=表2+1；
$（'#Table tr:last'）。在（''+Table_count2+''之后+
'' +
'' +
'-' +
'其他，未列出'+
'' +
“
”+
'' +
“
”+
'');
});
});

动态创建元素时，需要使用事件委派来处理元素上的事件，因此根据jQuery版本，使用

.bind

或

.on

API

只需将代码更改为：

$(document).on('change', '.report_cause', function () {
        if ($(this).val() == 'other') {
            $(this).parent().find('.cause_details').show();
        } else {
            $(this).parent().find('.cause_details').hide();
        }
    });

---

动态创建元素时，需要使用事件委派来处理元素上的事件，因此根据jQuery版本，在API上使用

.bind

或

只需将代码更改为：

$(document).on('change', '.report_cause', function () {
        if ($(this).val() == 'other') {
            $(this).parent().find('.cause_details').show();
        } else {
            $(this).parent().find('.cause_details').hide();
        }
    });

试试这个。问题是，在创建动态元素时，需要再次在
$（'.report\u cause'）
上注册更改事件

$（文档）.ready（函数（）{
$（'.cause_details'）.hide（）；
BindChange（）；
$（'#btnAdd'）。单击（函数（）{
计数2=计数2+2；
表2=表2+1；
$（'#Table tr:last'）。在（''+Table_count2+''之后+
''+
''+
'-'+
'其他，未列出'+
''+
“
”+
''+
“
”+
'');
BindChange（）；
});
});
函数BindChange（）
{
$（'.report_cause'）.bind（“change”，function（）{
if（$（this）.val（）=='other'）{
$（this.parent（）.find（'.cause_details'）.show（）；
}否则{
$（this.parent（）.find（'.cause_details'）.hide（）；
}
});
}

试试这个。问题是，在创建动态元素时，需要再次在
$（'.report\u cause'）
上注册更改事件

$（文档）.ready（函数（）{
$（'.cause_details'）.hide（）；
BindChange（）；
$（'#btnAdd'）。单击（函数（）{
计数2=计数2+2；
表2=表2+1；
$（'#Table tr:last'）。在（''+Table_count2+''之后+
''+
''+
'-'+
'其他，未列出'+
''+
“
”+
''+
“
”+
'');
BindChange（）；
});
});
函数BindChange（）
{
$（'.report_cause'）.bind（“change”，function（）{
if（$（this）.val（）=='other'）{
$（this.parent（）.find（'.cause_details'）.show（）；
}否则{
$（this.parent（）.find（'.cause_details'）.hide（）；
}
});
}

这是：

$('.report_cause').change(function () {

仅适用于调用时存在的
.report\u cause
元素。要处理新元素，您需要委托处理程序：

$(document).on('change', '.report_cause', function(){

此外，如果希望新元素最初隐藏，请相应地修改输出HTML：

'<p class=\"cause_details\" style=\"display:none\">'+


#
原因
1.
-
其他，未列出


这是：

仅适用于调用时存在的
.report\u cause
元素。要处理新元素，您需要委托处理程序：

$(document).on('change', '.report_cause', function(){

此外，如果希望新元素最初隐藏，请相应地修改输出HTML：

'<p class=\"cause_details\" style=\"display:none\">'+


#
原因
1.
-
其他，未列出


DOM加载后创建的元素需要是委派事件，否则DOM不知道它们存在。DOM加载后创建的元素需要是委派事件，否则DOM不知道它们存在。稍作解释会有所帮助。问题是什么？你的代码是如何解决的？普罗蒂普：即使是正确的答案，如果没有解释，也会被否决。一点解释会很有帮助。问题是什么？你的代码是如何解决的？普罗蒂普：即使是正确的答案，如果没有解释，也会被否决。一点解释会很有帮助。问题是什么？你的代码是如何解决的？普罗蒂普：即使是正确的答案，如果没有解释，也会被否决一点解释会有帮助的。问题是什么？你的代码是如何解决的？Protip：即使是正确的答案，如果没有解释，也会被否决