Home » Jquery » javascript – jQuery not firing when clicking item in drop down menu

javascript – jQuery not firing when clicking item in drop down menu

Posted by: admin February 24, 2020 Leave a comment

Questions:

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?

How to&Answer:

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>

Answer:

First of all your div with class dropdown-menu is inside the button. Put it outside. And secondly, you have added event handler only for .download-csv. You need to add one for download-pdf as well.

See fiddle here

Answer:

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>