jQuery 在empty() 一个元素之后再 append() 到它，如何触发附加元素的点击事件？

Question

我有下面的代码。

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>

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();
});

使用延迟到 append 2 步点击。 单击.button-group02后， .result将显示最终结果。

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

但问题是，如果我在.button-group01选项之间切换，function Two()上的click事件将不再触发，因为One()上的tar.empty()调用。

我该如何解决？

谢谢。

Answer 1

问题与您使用延迟有关。 一旦 promise 得到解决，就是这样，延迟的 object 就完成了。 这意味着在单击第一组单选按钮一次后，将调用 Two() 但不再调用。 否则你的代码很好。

代码中一个非常简单的解决方案是在 One() 中更改这一行：

if (deferred !== undefined) { deferred.resolve(); }

简单来说

Two();

正如在这个片段中：

 $(function(){ function One() { $('.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>'); } Two(); }); } function Two() { $('.button-group02 input[type="radio"]').on('click', function(e){ let tar = $('.result'); tar.empty(); tar.append('<p>result is: '+$(this).val()+'</p>'); }); } function Three(deferred) { } function run() { let defer1 = $.Deferred(); let defer2 = $.Deferred(); One(); /* $.when(defer1).done(function () { Two(defer2); }); $.when(defer2).done(function () { Three(); }); */ } run(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

但我想可能有你宁愿使用承诺的原因。 好吧，如果您期待 stream 的承诺（如本例所示），您可能需要考虑使用 Observables 和 RxJS：

https://rxjs.dev/guide/overview

我从来没有在 Jquery 中使用过 RxJS 但这个页面似乎可以解决这个问题：

https://xgrommx.github.io/rx-book/content/how_do_i/jquery_with_rxjs.html

如果您不太热衷于学习 rxjs，并且不想在每个 function 中硬编码 function 调用，我会考虑使用回调。