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

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/why-click-event-is-fired-first-time-only-migrated/">

Why click event is fired first time only? [migrated]</a>
0
, , , icolumbro 9 months 0 Answers 32 views 0

Leave an answer