Question

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

spe.cca <- cca(spdata~.,env)
plot(spe.cca, choices=c(1,2), display=c('sp','bp'), scaling=2)

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

Answer 1

尝试一下。在以下位置修改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
});

Answer 2

尝试使用$(document)作为父选择器，这是一个好习惯，因为它允许动态元素接收相同的功能。

此外，不要每次都将href链接到变量，而是创建一个新变量，该变量将为'？text ='+消息值，否则，每次单击“更改”时，该值将附加到旧的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>

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

2 个答案: