单击下拉菜单中的项目时，jQuery未启动

Question

我正在更新我的项目的UI，该项目有两个PDF和CSV下载按钮。我现在试着把它们放在下拉菜单中，以节省一些空间和更干净的UI。我现在的问题是，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

First uptype不像在a标记上那样使用。如果使用，它应该提供有关mime类型的信息。把它扔掉。

接下来，<button>元素中不能包含交互式内容，因此需要解决此问题。

最后，<a href="#">有一个固有的动作，导航，你需要停止它。

我会选择这样的东西：

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