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”类。一个主 div 中大约有 6 个类似的引导窗格。每个窗格也有自己的形式。我创建了一个超级简单的点击处理程序如下。

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

这完全行不通。如果我像这样通过 id 访问点击事件：

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

它每次都有效。我无法上班的课堂活动。我有 6 个数据非常相似的表单，我想简单地捕获所有表单并将它们发送到相同的后端函数。基本上我想从类 click 启动函数，然后根据元素的 id click 序列化表单并将其发送到后端。

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();