Question

我在bootstrap中有以下html代码：

＆＃13;

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

＆＃13;

该按钮具有类＆＃34; add_meta_submit＆＃34;。在一个主要div中有大约6个类似的bootstrap窗格。每个窗格也有自己的表单。我创建了一个超级简单的点击处理程序，如下所示。

＆＃13;

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

＆＃13;

这完全不起作用。如果我按ID访问click事件：

$（＆＃34;＃元提交＆＃34）。单击（函数（）{

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

Answer 1

你有 class =＆＃34;＆＃34; 两次，这是错误，你走了

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有效！

Answer 2

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

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

jQuery点击按类不起作用

2 个答案: