How to write CLICK function for a Button inside many DIVS using JQUERY

Question

I have this html code. I'm trying to show a table when the button is clicked. It works when button is outside all the divs. But I need to write the click event when button is still inside.

Here's my HTML code:

                   <div class="col-md-4 col-sm-4 col-6">
                        <div class="view overlay hm-white-slight">
                            <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="">
                            <p><strong class="text-success">All Appointments</strong></p>
                            <button id="click" class="btn btn-success">Show</button>
                            <a >
                                <div class="mask"></div>
                            </a>
                        </div>
                    </div>

And here's my jquery code:

        <script>
            $(document).ready(function (){
                $('#appointment-table').hide();
                $('div.col-md-4 button#click').click(function (){
                    $('#appointment-table').fadeToggle('slow');
                });
            });
        </script>

But it is not working... Can anyone please help?

But it's not working Sir.... That's why I use something like that (jquery selectors) — the_dempa
– the_dempa, Commented Oct 12, 2017 at 16:05
You could try $('div.col-md-4').on("click","#click",function(){... — Funk Doc
– Funk Doc, Commented Oct 12, 2017 at 16:05
The truth is, there is no element with the id appointment-table within the code provided. In the following JSFiddle, I have changed nothing except for adding a div with the id appointment-table: jsfiddle.net/066oodg8/1 — James Douglas
– James Douglas, Commented Oct 12, 2017 at 16:10
If you reference the button by its ID, ie $("#click") and <button id='click'/> and there is only one button with that ID (because IDs must be unique within the document) and your html is not added dynamically (ie after your doc ready) - then it will work anywhere. So if it's not working, one of the above is not correct and your question does not make it clear which one. — fdomn-m
– fdomn-m, Commented Oct 12, 2017 at 16:12

James Douglas · Accepted Answer · 2017-10-12 16:06:49Z

1

There is no problem here, other than the fact that there is no element in your code with the id appointment-table.

JSFiddle: https://jsfiddle.net/066oodg8/

$(document).ready(function() {
  $('#appointment-table').hide();
  $('div.col-md-4 button#click').click(function() {
    $('#appointment-table').fadeToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4 col-6">
  <div class="view overlay hm-white-slight">
    <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="Thumbnail Alt">
    <p><strong class="text-success">All Appointments</strong></p>
    <button id="click" class="btn btn-success">Show</button>
    <a>
      <div class="mask"></div>
    </a>
  </div>
</div>
<div id="appointment-table">
  Appointment Table
</div>

However you may notice a flicker as the #appointment-table is hidden; To avoid this use the CSS display: none; on the element instead of hiding it with jQuery.

$(document).ready(function() {
  $('div.col-md-4 button#click').click(function() {
    $('#appointment-table').fadeToggle('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-4 col-6">
  <div class="view overlay hm-white-slight">
    <img src="images/doctor-new.png" class="img-fluid img-thumbnail" alt="Thumbnail Alt">
    <p><strong class="text-success">All Appointments</strong></p>
    <button id="click" class="btn btn-success">Show</button>
    <a>
      <div class="mask"></div>
    </a>
  </div>
</div>
<div id="appointment-table" style="display: none;">
  Appointment Table
</div>

edited Oct 12, 2017 at 16:06

answered Oct 12, 2017 at 16:04

James Douglas

3,4662 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

the_dempa Over a year ago

It doesn't work Sir... When the button is outside the div function works as expected. but in this case, it is not... I'm wondering why.... :(

James Douglas Over a year ago

@the_dempa Unless you are viewing this from the mobile app, there should be a button that says "Run code snippet". That should run the code I've posted. It seems to work fine for me...

the_dempa Over a year ago

Yes this is correct and works fine. I even tried adding my code to fiddle.net but in my computer it is not working unless the button is outside the div

Collectives™ on Stack Overflow

How to write CLICK function for a Button inside many DIVS using JQUERY

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related