我有一个带有下拉按钮的Bootstrap 4输入组。我需要根据输入文本字段中插入的值来更改下拉列表中链接的href属性值。当用户单击下拉菜单时,我将更改href,但是click事件仅在第一次触发,这是怎么回事?
<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 );
} );
} );
尝试一下。在以下位置修改您的html:
<div class="my-container" id="customContainer">----</div>
并且在您的jquery中:
$( '#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
});
尝试使用$(document)
作为父选择器,这是一个好习惯,因为它允许动态元素接收相同的功能。
此外,不要将href每次都连接到变量上,而是创建一个新的变量,该变量将为'?text ='+消息值,否则,每次单击“ change”时,该值将附加到旧的href变量上。
$(document).on('click', '[data-toggle="dropdown"]', function() {
let message_val = $('#message').val();
$('.dropdown-item').each(function() {
let href = $(this).attr('href');
var newhref = '?text=' + encodeURI(message_val);
$(this).attr('href', newhref);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">change<i class="fas fa-paper-plane mx-2"></i></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">one</a>
<a class="dropdown-item" href="#">two</a>
<a class="dropdown-item" href="#">three</a>
</div>
</div>
</div>