jQuery按类单击不工作

Question

我在引导中有以下html代码：

​

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

​

按钮上有"add_meta_submit“类。大约有6个类似的引导窗格都在一个主div内。每个窗格也有自己的表单。我创建了一个超级简单的单击处理程序，如下所示。

​

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

​

这完全没用。如果我按id访问click事件，如下所示：

$(“#meta”).click(函数(){

每次都管用。我无法参加的班级活动。我有6个表单与非常相似的数据，我想简单地捕获所有的表单并将它们发送到相同的后端函数。基本上，我希望从类单击开始函数，然后根据元素的id单击序列化表单并将其发送到后端。

Answer 1

你有class=“两次”，这就是错误，给你

​

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

​

希望这行得通！

Answer 2

首先检查Jquery是否有正确的链接。检查脚本src。很好，然后把类改为id。如果您想使用类，那么在父div上放置一个id。

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