jQuery не срабатывает при нажатии пункта в выпадающем меню

Question

Я обновляю пользовательский интерфейс моего проекта, который имеет две кнопки загрузки для PDF и CSV. Я пытаюсь поместить их сейчас в выпадающее меню, чтобы сэкономить место и более чистый интерфейс. Моя проблема в том, что jQuery больше не работают после помещения их в выпадающее меню. Вот что у меня есть:

<div class="col-sm-8">
    <div class="btn-group float-right">
        <button type="button" class="btn btn-success" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-download"></i>Download
            <div class="dropdown-menu" role="menu" x-placement="top-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-1px, -3px, 0px);">
                <a type="button" href="#" data-href="{{route('csv')}}"
                    class="dropdown-item download-csv">CSV</a>
                <div class="dropdown-divider"></div>
                <a type="button" href="#" data-href="{{ route('pdf') }}"
                    class="dropdown-item download-pdf">PDF</a>
            </div>
        </button>
    </div>
</div>

js

$(document).on('click','.download-csv', function(){
    console.log('just here');
});

ТОЛЬКО КНОПКА

<div class="col-sm-4">
    <a type="button" href="#" data-href="{{route('csv')}}"
        class="btn btn-block btn-secondary btn-download custom-font-button download-csv"><i class="fa fa-download"></i>@lang('guest.csv')</a>
</div>

Это как и в предыдущих кодах, но когда я просто использую кнопки, все работает хорошо. Что может быть причиной этого?

Answer 1

Надеюсь, это поможет вам. попробуйте это

$(document).on('click', '.download-csv', function() {
  console.log('just here');
});

.open .dropdown-menu {
  display: block !important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-sm-8">
  <div class="btn-group float-right">
    <button type="button" class="btn btn-success" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-download"></i>Download
            <div class="dropdown dropdown-menu" role="menu" x-placement="top-start" style="position: absolute; will-change: transform; left: 0px; transform: translate3d(-1px, -3px, 0px);">
                <a type="button" href="#" data-href="{{route('csv')}}"
                    class="dropdown-item download-csv">CSV</a>
                <div class="dropdown-divider"></div>
                <a type="button" href="#" data-href="{{ route('pdf') }}"
                    class="dropdown-item download-pdf">PDF</a>
            </div>
        </button>
  </div>
</div>

<div class="col-sm-4">
  <a type="button" href="#" data-href="{{route('csv')}}" class="btn btn-block btn-secondary btn-download custom-font-button download-csv"><i class="fa fa-download"></i>@lang('guest.csv')</a>
</div>

Answer 2

Сначала type - это , который не используется таким образом на теге a. Если используется, он должен предоставить информацию о типе пантомимы. Просто избавьтесь от этого.

Далее, вы не можете иметь интерактивный контент внутри элемента <button>, поэтому вам нужно это исправить.

Наконец <a href="#"> есть неотъемлемое действие, навигация, вам нужно это остановить.

Я бы go с чем-то вроде:

$(document).on('click','.download-csv, .download-pdf', function(event){
    //Stop navigation
    event.preventDefault();
    //Get target location from href
    let location = this.href;
    console.log(`Do something with: ${location}"`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-8">
    <div class="btn-group float-right">
        <button type="button" class="btn btn-success" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-download"></i>Download</button>
            <div class="dropdown-menu" role="menu" x-placement="top-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-1px, -3px, 0px);">
                <a href="{{route('csv')}}"
                    class="dropdown-item download-csv">CSV</a>
                <div class="dropdown-divider"></div>
                <a  href="{{ route('pdf') }}"
                    class="dropdown-item download-pdf">PDF</a>
            </div>
    </div>
</div>