Legen Sie eine form in eine Seite mit jquery?

Ich bin mit jquery einfügen versteckter form in eine Seite (wenn die Seite bereits geladen). Aus irgendeinem Grund ist der code nicht funktioniert. Hier ist ein Beispiel für den code:

$(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});

Form ist nicht eingefügt in den Körper der Seite. Was mache ich falsch?

Update: ich habe festgestellt, dass wenn ich den code in einer Seite auf einer eigenen funktioniert es einwandfrei. Wenn ich versuche, es in einen großen, bereits bestehenden Seite nicht mehr funktioniert. Irgendwelche Ideen, was könnte den genau gleichen code zu scheitern?

InformationsquelleAutor froadie | 2011-09-05

6

versuchen Sie dies:
```
$(document).ready(function(){
    $('body')
        .append('<form id="mySearch"></form>'); //append a new form element with id mySearch to <body>
    $('#mySearch') 
        .attr("action","mySearchPage.cfm") .attr("method","post") //set the form attributes
        //add in all the needed input elements
        .append('<input type="hidden" name="btnSearch" id="btnSearch" value="Search">')
        .append('<input type="hidden" name="txtField1" id="txtField1" value="">')
        .append('<input type="hidden" name="txtField2" id="txtField2" value="">')
        .append('<input type="hidden" name="selType" id="selType" value="0">')
        .append('<input type="hidden" name="selType2" id="selType2" value="2">')
});
```
Trotzdem sollte man unbedingt vermeiden, diese Art von Ansatz fügen Sie dynamische Inhalte auf den dom.
Die beste Technik ist zu einem einzigen string mit allen notwendigen markup und injizieren es in einem Schuss! So etwas wie:
```
var HTML = '<form attributes><input><input>...</form>';
$("#container").html(HTML);
```
Ist das nicht im Grunde identisch zu meinem code?
Auch können Sie erklären, warum die Injektion einer einzelnen Zeichenfolge ist die beste Technik?
$(function(){ != $(document).bereit(Funktion(){ ... und eine einzelne Injektion besser ist weil Sie nicht haben, die zum Durchlaufen des dom-mehr als einmal und nicht mehrere Methoden aufrufen.
Die jquery-API-Staaten, dass Sie in der Tat identisch: api.jquery.com/ready
ja, theoretisch sind Sie identisch, aber ich vertraue nicht zu 100% mit der jQuery-Doku (ich stellte mich vor einige Probleme, die Zeit, die nicht übereinstimmen mit den docs :P)... also schlug ich vor, Sie versuchen, eine andere syntax 😉

InformationsquelleAutor daveoncode
1

Es für mich funktioniert, vielleicht wollen Sie nicht versteckte Formularfelder?

http://jsfiddle.net/M5vWR/

Sehen, dieses mit sichtbaren Formularelemente.

http://jsfiddle.net/M5vWR/2/

Ich möchte, dass Sie unsichtbar zu sein. Aber Sie sind überhaupt nicht da. Ich habe versucht mit der Inspektion der Quelltext der Seite, und es ist nicht da.
untersuchen Sie die aktuellen dom. "Quelltext anzeigen" zeigt dir nur das raw-markup.
es wird nicht angezeigt, wenn ich überprüfen die dom. macht es einen Unterschied, dass dieser code in eine separate javascript-Datei?
hast du gesehen, meine Geige?
es sollte keine Rolle spielen, solange es korrekt eingerichtet ist.

InformationsquelleAutor Daniel A. White
1

Nachdem alle, es war nur ein syntax-problem mit einer extra-tag in der Datei, die das javascript: - P Der code funktioniert jetzt!

InformationsquelleAutor froadie

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.