CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Eem Jee
Eem Jee

Reputation: 1309

jQuery not firing when clicking item in drop down menu

I'm updating the UI of my project that has two download buttons for PDF and CSV. I'm trying to put them now in a drop down menu to save some space and a cleaner UI. My problem now is, the jQuery are not working anymore after putting them in drop-down menu. Here's what I have:

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

BUTTON ONLY

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

It's as the same as before codes, but when I'm just using buttons, it's working well. What could be the possible cause for this one?

Upvotes: 2

Views: 72

Answers (2)

Jon P
Jon P

Reputation: 19772

First up type is not used like that on an a tag. If used it should provide info about the mime type. Just get rid of it.

Next, you can't have interactive content within a <button> element so you need to fix that.

Finally <a href="#"> has an inherent action, navigation, you need to stop that.

I'd go with something like: 

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

Upvotes: 0

vadivel a
vadivel a

Reputation: 1794

Hope this help you. try this

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

Upvotes: 1

Related Questions