Why click event is fired first time only? [migrated]

Question

I have a Bootstrap 4 input group with a dropdown button. I need to change the href attribute value of links in dropdown depending on value inserted in the input text field. I’d to change the href(s) when user click on dropdown but the click event is fired first time only, what’s wrong?

<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>

$( '.my-container' ).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 );
    } );
} );
0
, , , icolumbro 3 weeks 0 Answers 13 views 0

Leave an answer