Jquery 为什么单击事件仅第一次触发？

我有一个带下拉按钮的Bootstrap4输入组。我需要根据输入文本字段中插入的值更改下拉列表中链接的href属性值。我想在用户单击下拉列表时更改href，但单击事件仅在第一次触发，怎么了

<div class="my-container">
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" id="message" class="form-control" placeholder="Write a message here..." aria-label="Text input with dropdown button">
    <div class="input-group-append">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Invia a...<i class="fas fa-paper-plane mx-2"></i></button>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Donald Duck</a>
        <a class="dropdown-item" href="#">Mickey Mouse</a>
        <a class="dropdown-item" href="#">Daenery Targaryen</a>
        </div>
    </div>
</div>

---

试试这个。在以下位置修改您的html：

<div class="my-container" id="customContainer">----</div>

如果第一个解决方案不起作用，您可以尝试：

$(document).on('click', '[data-toggle="dropdown"]', function(){
    //etc
});

尝试使用

$（document）

作为父选择器，这是一种很好的做法，因为它允许动态元素接收相同的函数

另外，不要每次都将href连接到变量，而是创建一个新变量，该变量将是“？text=”+消息值，否则每次单击“更改”时，该值将附加到旧的href变量

$（文档）。在（'click'，'data toggle=“dropdown”]'上，函数（）{
让message_val=$（'#message'）.val（）；
$（'.dropdown item'）。每个（函数（）{
让href=$（this.attr（'href'）；
var newhref='？text='+encodeURI（message_val）；
$（this.attr（'href'，newhref）；
});
});

@
改变
尝试了两种解决方案，没有任何变化，结果相同，但我不明白为什么…不确定问题出在哪里，是否有任何错误@i您是否意识到，第一次单击后，类似的内容将是
？text=1
，第二次是
？text=1？text=2
，第三次是
？text=1？text=2？text=3
$( '#customContainer' ).on( 'click', '[data-toggle="dropdown"]', function() {
    let message_val = $( '#message' ).val();

    $( '.dropdown-item' ).each( function() {
        let href = $( this ).attr( 'href' );

        href += '?text=' + encodeURI( message_val );
        $( this ).attr( 'href', href );
    } );
} );

$(document).on('click', '[data-toggle="dropdown"]', function(){
    //etc
});