jQuery Click by class not working

Question

I have the following html code in bootstrap:

<div class="panel panel-default text-center">
                        <div class="panel-heading"> 
                            <h3>Team Meta Data</h3>
                        </div><!--panel heading end-->
                        <hr>
                        <form class="form-horizontal" id="team-meta-form">
                            <input type="hidden" id="option" name="option" value="12">
                            <input type="hidden" id="tab-type" name="tab-type" value="team">
                            <div class="form-group">
                                <label for="team-meta-page-title" class="col-sm-3 control-label">Meta Page Title:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-page-title" name="meta-page-title">
                                </div>
                                <span class="col-xs-3">(Enter Page Title)</span>
                            </div>
                            <div class="form-group">
                                <label for="team-meta-page-description" class="col-sm-3 control-label">Meta Page Description:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-page-description" name="meta-page-description">
                                </div>
                                <span class="col-xs-3"> (Enter Meta Page Description)</span>
                            </div>
                            <div class="form-group">
                                <label for="team-meta-keywords" class="col-sm-3 control-label">Meta Keywords:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-keywords" name="meta-keywords">
                                </div>
                                <span class="col-xs-3">(Enter Meta Keywords)</span>
                            </div>
                        </form>
                        <div class="panel-footer">
                            <button class="btn btn-lg" id="team-meta-submit" class="add_meta_submit">Save Changes</button>
                            <br><div id="teammetamsg" name="teammetamsg"></div>
                        </div><!--panel footer end-->
                    </div><!--panel end-->

The button has the class "add_meta_submit". There are about 6 similar bootstrap panes all inside one main div. Each pane also has its own form. I created a super simple click handler as follows.

$('.add_meta_submit').click(function(){
        alert("click worked");
    });

This is totally not working. If I access the click event by id like this:

$("#meta-submit").click(function(){

it works every time. The class event I cannot get to work. I have 6 forms with very similar data and I would like to simply capture all the forms and send them to the same backend function. Basically I want to start the function from the class click then based on the id of the element click serialize the form and send it to the backend.

Try to put the class in double quotes `""`. Like this `$(".add_meta_submit")` — Derick Alangi, Sep 13 '16 at 22:14
No what? It didn't still work? Try to view the browser JS console to see if it logs any errors. — Derick Alangi, Sep 13 '16 at 22:17

Francisco Fernandez · Accepted Answer · 2016-09-14T13:47:44.430

You have class="" two times, that's the error, here you go

$(".add_meta_submit").click(function(){
        alert("click worked");
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-   bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="panel panel-default text-center">
                        <div class="panel-heading"> 
                            <h3>Team Meta Data</h3>
                        </div><!--panel heading end-->
                        <hr>
                        <form class="form-horizontal" id="team-meta-form">
                            <input type="hidden" id="option" name="option" value="12">
                            <input type="hidden" id="tab-type" name="tab-type" value="team">
                            <div class="form-group">
                                <label for="team-meta-page-title" class="col-sm-3 control-label">Meta Page Title:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-page-title" name="meta-page-title">
                                </div>
                                <span class="col-xs-3">(Enter Page Title)</span>
                            </div>
                            <div class="form-group">
                                <label for="team-meta-page-description" class="col-sm-3 control-label">Meta Page Description:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-page-description" name="meta-page-description">
                                </div>
                                <span class="col-xs-3"> (Enter Meta Page Description)</span>
                            </div>
                            <div class="form-group">
                                <label for="team-meta-keywords" class="col-sm-3 control-label">Meta Keywords:</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="team-meta-keywords" name="meta-keywords">
                                </div>
                                <span class="col-xs-3">(Enter Meta Keywords)</span>
                            </div>
                        </form>
                        <div class="panel-footer">
                            <button class="btn btn-lg add_meta_submit" id="team-meta-submit" >Save Changes</button>
                            <br><div id="teammetamsg" name="teammetamsg"></div>
                        </div><!--panel footer end-->
                    </div><!--panel end-->

Hope this works!

That was totally it Francisco Fernandez. I added so many things over a long period of time that I couldn't see the obvious anymore. I already defined a class for bootstrap. I didn't even see it anymore because I copied and pasted from a template so many times. So I added another class definition. This was definitely a second set of eyes required thing. — sixstring, Sep 14 '16 at 03:57

Abdulla · Answer 2 · 2016-09-13T22:26:34.340

-1

First check if you have Jquery properly linked. Check script src. It's good then change class to id. If you want to use class then put an id on a parent div.

$('#parent_id .yourclass').click();

edited Sep 13 '16 at 22:26

answered Sep 13 '16 at 22:23

Abdulla

485
6
16

the id case working rules out jquery not being properly linked. – Kevin B Sep 13 '16 at 22:23
thanks for the suggestions. I will try all of these tonight. – sixstring Sep 14 '16 at 02:17

jQuery Click by class not working

2 Answers2