Javascript 单选按钮更改事件不发生'；我不能正常开火

它应该相当简单。我正在尝试实现一个单选按钮组。当单击一个单选按钮时，它将在下面附加一个文本“test”，当单击另一个单选按钮时，第一个单选按钮上的文本将消失，第二个单选按钮将附加文本。此外，还有一个按钮可以动态添加radiobutton，并在该radiobutton中添加更改事件。以下是我的代码：

这个代码的问题是，当我单击第二个radiobutton时，第一个radiobutton文本不会消失，当我选中第三个radiobutton时，第二个和第一个radiobutton文本不会消失

我怎么修理它

函数添加（）{
var cat_name=$（'input.text'）.val（）；
$（'div.radioGroup'）。追加（''+cat_name+'
'）；
var-inputDOM=$（'input[value=“”+cat_name+'“]'）；
$（'input:radio[name=“cat”]”）。在（'change'，function（）上{
//警报（类别名称）；
控制台日志（“”）；
控制台日志（类别名称）；
log（cat_name+“ischecked为”+$（'input[value=“'+cat_name+'”））。is（“：checked”）；
如果（$（'input[value=“”+cat_name+“]”）是（“：checked”））{
inputDOM.parent（）之后（“test
”；
//警报（“是的，正在工作”）；
}否则{
//警报（“取消选中正在工作！”）；
log（“取消选中正在工作”）；
inputDOM.parent（）.nextAll（）.remove（）；
}
});
$（'input.text'）.val（“”）；
}

添加

移动

$('input:radio[name="cat"]').on('change', function() { 

在add（）之外并使用委派：

$('div.radioGroup').on("change",'radio[name="cat"]',function() {

可能是这样。现在猜不出你真正想要什么已经太迟了

函数添加（）{
var cat_name=$（'input.text'）.val（）；
$（'div.radioGroup'）。追加（''+cat_name+'
'）；
$（'input.text'）.val（“”）；
}
$（'div.radioGroup'）。在（'change'，'input:radio[name=“cat”]”上，函数（）{
var cat_name=this.name，inputDOM=$（'input[value=“”+cat_name+'”）；
控制台日志（“”）；
控制台日志（类别名称）；
log（cat_name+“ischecked为”+$（'input[value=“'+cat_name+'”））。is（“：checked”）；
如果（$（'input[value=“”+cat_name+“]”）是（“：checked”））{
inputDOM.parent（）之后（“test
”；
//警报（“是的，正在工作”）；
}否则{
//警报（“取消选中正在工作！”）；
log（“取消选中正在工作”）；
inputDOM.parent（）.nextAll（）.remove（）；
}
});

添加
我创建了您应该拥有的代码段，因此现在它是一个文本，cat\u名称应改为value\u name。这是单选按钮的值。选择器通过值来区分。而且，它也不起作用。现在文本甚至不再消失，一切都在堆积。我想当你点击其他单选按钮时，第一个选中的按钮追加的文字消失了。我不明白。您不能取消选中收音机-您可以取消选中复选框。你能展示一下点击前后的图片吗？我想删除inputDOM并使用$（this）作为遍历锚