Javascript jQuery在empty（）元素之后再追加（）元素，如何在追加的元素上触发click事件？

我有下面的代码

HTML:

<div class="button-group01">
    <input type="radio" id="btn01" name="group01" value="type1"> <label for="btn01">type1</label>
    <input type="radio" id="btn02" name="group01" value="type2"> <label for="btn02">type2</label>
</div>
<div class="button-group02"></div>
<div class="result"></div>

类型1
类型2

jQuery

$(function(){
    function One(deferred) {
        $('.button-group01 input[type="radio"]').on('click', function(e){
            let tar = $('.button-group02');
            tar.empty();
            if ( $(this).val() == "type1" ) {
                tar.append(' <input type="radio" id="btn04" name="group02" value="type1-1"> <label for="btn04">type1-1</label>');
                tar.append(' <input type="radio" id="btn05" name="group02" value="type1-2"> <label for="btn05">type1-2</label>');
            }
            else if ( $(this).val() == "type2" ) {
                tar.append(' <input type="radio" id="btn04" name="group02" value="type2-1"> <label for="btn04">type2-1</label>');
                tar.append(' <input type="radio" id="btn05" name="group02" value="type2-2"> <label for="btn05">type2-2</label>');
            }
            if (deferred !== undefined) { deferred.resolve(); }
        });
    }
    function Two(deferred) {
        $('.button-group02 input[type="radio"]').on('click', function(e){
            let tar = $('.result');
            tar.empty();
            tar.append('<p>result is: '+$(this).val()+'</p>');
            if (deferred !== undefined) { deferred.resolve(); }
        });
    }
    function Three(deferred) {
        // ...
    }

    function run() {
        let defer1 = $.Deferred();
        let defer2 = $.Deferred();
        One(defer1);
        $.when(defer1).done(function () {
            Two(defer2);
        });
        $.when(defer2).done(function () {
            Three();
        });
    }
    run();
});

$（函数（）{
职能一（延期）{
$（'.button-group01输入[type=“radio”]'）。在（'click'，函数（e）{
设tar=$（'.button-group02'）；
tar.empty（）；
if（$（this.val（）=“type1”）{
tar.append（'type1-1'）；
tar.append（'type1-2'）；
}
else if（$（this.val（）=“type2”）{
tar.append（'type2-1'）；
tar.append（'type2-2'）；
}
if（deferred！==未定义）{deferred.resolve（）；}
});
}
职能二（推迟）{
$（'.button-group02输入[type=“radio”]'）。在（'click'，函数（e）{
设tar=$（'.result'）；
tar.empty（）；
append（'结果是：'+$（this.val（）+'
'）；
if（deferred！==未定义）{deferred.resolve（）；}
});
}
职能三（推迟）{
// ...
}
函数运行（）{
设defer1=$.Deferred（）；
设defer2=$.Deferred（）；
一（1）；
$.when（延迟1）.done（函数（）{
二(二);；
});
$.when（延迟2）.done（函数（）{
三个（）；
});
}
run（）；
});

单击时使用“延迟”附加2个步骤。单击

.button-group02

后，

.result

将显示最终结果

在选择之间切换后，我想使最终结果可变

但问题是，如果我在

.button-group01

选项之间切换，

单击函数
Two（）
上的事件将不再触发，因为
tar.empty（）
调用
One（）

我该如何解决这个问题

谢谢。
问题在于您是否使用了延期付款。一旦承诺得到解决，就是这样，延迟的对象就完成了。这意味着在第一组单选按钮被单击一次后，将调用Two（），但不会再次调用。否则您的代码就可以了

代码中的一个非常简单的解决方案是在One（）中更改此行：

简单地

Two();

如本文所示：


$（函数（）{
功能一（）{
$（'.button-group01输入[type=“radio”]'）。在（'click'，函数（e）{
设tar=$（'.button-group02'）；
tar.empty（）；
if（$（this.val（）=“type1”）{
tar.append（'type1-1'）；
tar.append（'type1-2'）；
}
else if（$（this.val（）=“type2”）{
tar.append（'type2-1'）；
tar.append（'type2-2'）；
}
二（）；
});
}
函数二（）{
$（'.button-group02输入[type=“radio”]'）。在（'click'，函数（e）{
设tar=$（'.result'）；
tar.empty（）；
append（'结果是：'+$（this.val（）+'
'）；
});
}
职能三（推迟）{
}
函数运行（）{
设defer1=$.Deferred（）；
设defer2=$.Deferred（）；
一个（）；
/*$.when（延迟1）.done（函数（）{
二(二);；
});
$.when（延迟2）.done（函数（）{
三个（）；
}); */
}
run（）；
});

类型1
类型2
谢谢，您的解决方案成功了。我不知道这么简单。RxJS很有趣，但我不想使用jQuery本身以外的外部库。的确，这只是我问题的一个简单演示，我明天会尝试将这个解决方案应用到我的实际项目中，并让你知道它是否也有效。我确认这也适用于我的项目。谢谢@Michael
Two();