jQuery Klicken Sie nach Klasse funktioniert nicht

Question

Ich habe folgende 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-->

Die Taste hat die Klasse "add_meta_submit". Es gibt ungefähr 6 ähnliche bootstrap Scheiben alle innerhalb eines Hauptdiv. Jedes Fenster hat auch eine eigene Form. Ich habe einen super einfachen Click-Handler wie folgt erstellt.

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

Dies ist absolut nicht funktioniert. Wenn ich auf das Click-Ereignis von id wie folgt aus:...

$ ("# Meta-Eintragen") klicken (function() {

funktioniert es jedes Mal die Klasse Ereignis kann ich nicht an die Arbeit I habe 6 Formulare mit sehr ähnlichen Daten und ich möchte einfach alle Formulare erfassen und sie an die gleiche Backend-Funktion senden.Im Grunde möchte ich die Funktion aus dem Klassenklick starten, dann basierend auf der ID des Elements klicken Sie auf das Formular serialisieren und senden sie an das Backend.

Answer 1

Sie haben class = "" zweimal, das ist der Fehler, hier gehen Sie

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

Answer 2

Überprüfen Sie zunächst, ob Jquery ordnungsgemäß verknüpft ist. Überprüfen Sie das Skript src. Es ist gut, dann ändern Sie die Klasse in ID. Wenn Sie die Klasse verwenden möchten, legen Sie eine ID in ein Eltern-Div.

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