Bind dynamisch hinzugefügt Formular zum Senden von Ereignis mit jQuery

Question

Was wäre der beste Weg, um das Senden Ereignis behandeln, wenn Sie mehrere Formulare dynamisch mit der gleichen Formular-ID in jQuery erstellt haben?

Bis jetzt macht diese Zeile, dass jQuery nur die erste Form behandelt.

$("form#noteform").submit(function(){ 
    // do stuff 
}); 

Art verwirrend, weil ich wirklich die von einer bestimmten Form vorlegen müssen fangen die richtigen Post Werte zu erhalten, damit die Wähler der Form muss eindeutig sein.

Wie können Sie es auf alle Submits hören lassen und später identifizieren, ob es die richtige Form-ID ist, die das Submit gestartet hat?

Answer 1

Es gibt keine beste Möglichkeit, dies mit IDs zu tun, da mehrere Elemente mit derselben ID ungültig sind.

Ich würde vorschlagen, stattdessen Ihre Formulare haben eindeutige IDs aber teilen einen Klassennamen. Wenn Sie dann die erste benötigen, können Sie die ID direkt oder die Klasse und den jquery: first selector verwenden.

$('form.className:first').submit(function(){ 
    stuff(); 
}); 

-edit- Der Versuch, das Problem tatsächlich zu adressieren festzustellen, welche Form vorgelegt. Auch hier setzt diese Lösung auf Unique

der Form ID

$('form.className').submit(function(){ 
    switch($(this).attr('id')){ 
    case 'form1id': 
     submitForm1(); 
     break; 
    case 'form2id': 
     submitForm2(); 
     break; 
    default: 
     stuff() 
     break; 
    }  
}); 

Answer 2

Ich habe mit dem submit Ereignis einige Probleme gesehen. Ich würde empfehlen, Ihre Ereignisse an die Klickereignisse für Ihre Formulare anzuhängen. Ich würde auch empfehlen, dass Sie nicht die gleichen IDs in HTML verwenden, wenn möglich. Das ist in der Regel eine schlechte Übung.

Zum Beispiel:

mit folgenden html:

<form id="questionForm" action="question/save/1234" method="post">> 
    <input type="text" id="question1" /> 
    <input type="text" id="answer1" /> 
    <input type="submit" id="saveQuestion1" class="submit" value="Save" /> 
</form> 
<!-- more forms --> 
<form id="questionForm" action="question/save/4321" method="post"> 
    <input type="text" id="question2" /> 
    <input type="text" id="answer2" /> 
    <input type="submit" id="saveQuestion2" class="submit" value="Save" /> 
</form> 

Sie können dies stattdessen verwenden:

$(document).ready(function() { 
    $('.submit').click(function(e) { 
    // load the form with closest (jQuery v1.3+) 
    var form = $(this).closest('form'); 
    // check form 
    if (!isValid(form)) 
    { 
     e.preventDefault(); 
    } 
    // or if you make the buttons of type button and not submit 
    if (isValid(form)) 
    { 
     form.submit(); 
    } 
    }); 
}); 

Answer 3

die letzte Option, die ich wirklich darüber nachdachte , weil ich schon verwendet dieser Code woanders

Wenn das rea ist lly arbeiten, dann wäre das große

zu überprüfen, ob das Formular gültig ist ich statt off

if (!isValid(form)) 

if form.id="tbnoteform" then 
submit the form 

verwenden konnte ich immer noch versuchen, das das Schlüsselwort verwenden

Können Sie die hängen weg zu erhalten dies jedes Mal, nachdem Sie die Selektor-Anweisung zu verwenden, erstellen Sie eine Objektinstanz ?? Also Formular ist jetzt eine Objektinstanz aus dem Formular?

Richard

Answer 4

Ich glaube, ich in eine Syntax Problem lief

ich meine komplette Code hier haben

die Schaltfläche vom Typ Bild

$(document).ready(function(){ 
    timestamp = 0; 
    $('.delete').click(function(e) { 
      // load the form with closest (jQuery v1.3+)  
     var form = $(this).closest('form'); // check form 
     if (!form.attr('id')="noteform") {  
      e.preventDefault();  
     }  

      // or if you make the buttons of type button and not submit  
     if (form.attr('id')="noteform") {  
     form.submit(function(){ 

     $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); 
     $.post("tbnotes.php",{ 
      noteid: $("#frmnoteid").val(), 
      action: "delete", 
      time: timestamp 

     }, function(xml) { 
      addMessages(xml); 
      }); 
     return false; 
       });     

     } // end off IF(form.attr('id')="noteform") 

}); // end off $ ('. delete) .click (function (e) {

}); // end off document ready

Answer 5

Ich habe meine Antwort komplett überarbeitet ... Es ist sauberer, einfacher und funktioniert auch für dynamisch hinzugefügte Formulare! ;-P

<script language="javascript"> 
$(function() { 
    $('form').live('specialSubmit',function() { 
     // do stuff... the form = $(this) 
     alert($(this).serialize()); // to prove it's working... 
    }); 
    bind_same_id_forms('noteform'); 
}); 
function bind_same_id_forms(id) { 
    $('form').die().live('keypress',function(ev) { 
     if(ev.keyCode == 13 && $(this).attr('id') == id) { 
      $(this).trigger('specialSubmit'); 
      return false; 
     } 
    }).children(':submit,:image').die().live('click',function(ev) { 
     if($(this).attr('id') == id) { 
      $(this).trigger('specialSubmit'); 
      return false; 
     } 
    }); 
} 
</script> 

Beispiel HTML:

<form id="noteform" action="question/save/1234" method="post"> 
    <input type="text" name="question" /> 
    <input type="text" name="answer" /> 
    <input type="submit"value="Save" /> 
</form> 
<!-- more forms --> 
<form id="noteform" action="question/save/4321" method="post"> 
    <input type="text" name="question" /> 
    <input type="text" name="answer" /> 
    <input type="submit" value="Save" /> 
</form> 

Answer 6

überarbeitete ich meinen Code Beispiel eine neue Notiz zu erstellen

Dies das Ereignis auch die neu hinzugefügte Form innerhalb der Callback einreichen legt Funktion aus dem Load-Ereignis.

Es ist ein Schritt vorwärts , weil die anderen Beispiele aus irgendeinem Grund die Arbeit nicht gemacht haben.

Ich weiß nichts über Nachteile davon, es so zu tun, noch !! Ich bin offen für alle Kommentare zu diesem Thema Wenn Sie see example

Zweck & Kommentare wollen: Die newnote Funktion zwei Argumente nimmt

-: index = die Zahl aus Notizen bereits auf der Seite

-: tbnoteid = die Notiz aus der Datenbank

Der Index soll auch wie ein Zähler der angezeigten Nachrichten handeln.

Wenn der Zähler zum Beispiel 10 überschreitet, soll er die Nachricht auf dem Kriterium löschen, das zuletzt aus der Seite und der db herauskommt (Nachricht mit dem ältesten Zeitstempel) (Logik muss auch später hinzugefügt werden)

Die einzige Aktion, die das Formular erlaubt Todo ist, löschen Sie die Nachricht aus der Datenbank und entfernen Sie sich selbst (das Container-div) von der Seite.Aus statischen Gründen wird es zuerst ausgeblendet.

Die Funktion kann mehr Argumente wie die Nachricht selbst annehmen. Wenn Benutzer die Seite eingibt, sollte die Newnote-Funktion von einer anderen Funktion aufgerufen werden, die die Nachrichten aus der Datenbank abruft, falls solche vorhanden sind.

Der Link zu erzeugen, um eine neue Notiz wird durch die Aktion aus einer anderen Form wie this example

$(document).ready(function(){ 
$('a[name=modal]').click(function(e) { //the selector is for testing purpose 
     //Cancel the link behavior 
     e.preventDefault(); 
     var $aantal = $("div.pane").size() 
    newnote($number+1,1); // second argument is supposed too come from the database 


    }); 

    function newnote(index,tbnoteid) { 


    $("div.wrapper:last").after('<div class="wrapper"></div>'); 
    $('.wrapper:last').load('tbnote.html .pane', function() { 
    $(".pane:last").prepend("testmessage"); //testpurpose 
    $('.pane:last #frmnoteid').val(tbnoteid); 

    $(this,".frm").attr('id' , index); 
    var $id = $(this).attr('id'); "); //testpurpose 
    $('.frm:last').submit(function(){ 
     $.post("tbnotes.php",{ 
     noteid: $("#frmnoteid").val(), 
     actie: "verwijder", 
     tijd: timestamp}, function(xml) { 
     addMessages(xml); 
     }); 

    alert("Hello mijn id = " + $id);"); //testpurpose 
    $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); 
    $(this).parents(".wrapper").remove(); 
    return false; 

      }); 
     }); 

} 

Answer 7

ersetzt werden, wenn Sie dynamisch hinzugefügt Formularen sind, sollten Sie die live Funktion in jQuery verwenden:

$('.submit').live('click', function(e) { 

statt

$('.submit').click(function(e) { 

Dies bindet den Klick-Callback an Schaltflächen mit der Klasse submit, auch wenn neue dynamisch hinzugefügt werden.

P.S. Es tut uns leid, dass Sie sich darüber ärgern, aber die Klarstellungen, die Sie in neue Antworten auf Ihre eigene Frage einfügen, sollten an die ursprüngliche Frage angehängt und nicht als Antworten hinzugefügt werden. Sie sind technisch nicht Antworten.

Answer 8

Was wäre der beste Weg, den einreichen Ereignis zu behandeln, wenn Sie mehr Formulare dynamisch erstellt mit der gleichen Form ID in jQuery hat?

Wenn id 'noteform' ist, zu wählen alle Form mit dieser ID:

jQuery('form[id="noteform"]') 

Vorsicht: Es ist nicht die beste Idee sein können mehrere HTML-Element (einschließlich Form) zu haben nicht eindeutige ID

Wie kann man es auf alle vorträgt machen hören?

Sie können Ereignisse auf ihrer Veranstaltung binden:

jQuery('form[id="noteform"]').submit(function(e){}); 

und später identifizieren, wenn es die richtige Form id ist, dass die einreichen ins Leben gerufen?

Obwohl durch den Selektor, es (meiner Meinung nach) gewährleistet ist mit dem richtigen id Form haben, können Sie die ID des Formulars im Fall einreichen überprüfen, indem mit diesem Objekt, zB:

jQuery('form[id="noteform"]').submit(function(e){ 
    if(this.id=='noteform') {/* do interesting stuffs */} 

    // use .index function to determine the form index from the jQuery array. 
    alert('index='+jQuery('form[id="noteform"]').index(this)); 
}); 

Wenn Sie in POC-Code-snippet interessiert sind, die ich benutze sie (Lösung) zu testen, hier ist es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled 1</title> 

<script type="text/javascript" src="jquery-1.3.2.js"></script> 

</head> 

<body> 

<form id="noteform"><div> 
<input type="submit" value="submit" /> 
</div></form> 

<form id="noteform"><div> 
<input type="submit" value="submit" /> 
</div></form> 

<form id="noteform"><div> 
<input type="submit" value="submit" /> 
</div></form> 

<script type="text/javascript"> 
/* <![CDATA[ */ 

// test for selection 
jQuery('form[id="noteform"]').each(function(i){ 
    alert('noteform #' + i); // 
}); 

// test for submission 
jQuery('form[id="noteform"]').submit(function(e){ 
    if(this.id=='noteform'){ 
    alert('index='+jQuery('form[id="noteform"]').index(this)); 
    return false; // cancel submission 
    } 
}); 

/* ]]> */ 
</script> 

</body> 

</html> 

Dank.