2016-03-21 10 views
0

Ich schrieb mein eigenes Jquery-Monatsauswahlsteuerelement. Der Monatswähler sitzt in einem <div />, der seinerseits an das <input /> Feld anhängen sollte, auf das ich es nenne.Jquery append() funktioniert nicht auf Eingabe ohne schließendes Tag

Um zu klären, hier ist der Code:

(function ($) { 
    //dict has to be a serialized dictionary. The dictionary needs to have years (as numbers) as keys and for each year a list of numbers representing the months. 
    //Only the provided years/month will be serialized as html. 
    //Sample usage (Razor): 
    //var json = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Periods.ToArray())); 
    //$('#monthPicker').CondatoMonthPicker(json); 
    $.fn.CustomMonthPicker = function (dict) { 
     debugger; 
     //Construct HTML 
     var wrapper = $(this); 

     $monthPickerHeaderHtml = $('some html...'); 
     wrapper.append($monthPickerHeaderHtml); 
     }; 
})(jQuery); 

Wie Sie aus meinem Code bemerken, ich MVC Razor verwenden. So verwende ich diese das Feld hält die picker zu instanziiert:

@Html.TextBoxFor(model => model.TimePeriod, new { @id = "custom-datepicker", @type = "date", @class = "ms-TextField-field" })  

Dies ist jedoch generiert die folgende html:

<input autocomplete="off" class="ms-TextField-field" data-val="true" data-val-date="The field TimePeriod must be a date." data-val-required="The TimePeriod field is required." id="custom-datepicker" name="TimePeriod" type="date"> 

Beachten Sie das fehlende Ende-Tag. zurück zu meinen benutzerdefinierten Datumsauswahl-Funktion gehen, wenn ich .append() auf meinem Wrapper verwenden (<div />) Objekt, spuckt es die folgende ouput html aus:

Wie Sie sehen können, sondern meine eigenen HTML von Anhängen, es tatsächlich fügt es ein und fügt eine Endung </input> hinzu, um zu verhindern, dass mein ganzes Konstrukt auf meiner Seite angezeigt wird. Weiß jemand, warum das passiert und wie man arbeitet

EDIT: Ich denke, ich war nicht klar genug mit meiner Formulierung. Ich möchte den Wert meines <input> Felds nicht festlegen. Irgendwie JQuery das Eingangselement erhält, fügt meine HTML und fügt einen End-Tag an dann enden, wenn es wirklich einen End-Tag zuerst hinzufügen sollte und dann meine eigenen HTML nach dem End-Tag anhängen, so dass es wie folgt aussieht:

<input ...></input> 
My custom html... 
+1

Bitte beachten Sie die [ 'input' Spezifikation] (https://www.w3.org/TR/html5/forms.html#the- Eingabeelement). 'input' Tags dürfen kein schließendes Tag haben (selbst ein kurzes schließendes Tag wie' ' ist technisch falsch außer in XHTML). Sie können auch keine Elemente in ein "input" -Tag einbetten (aber Sie können ein '

+0

Machen Sie bitte auch ein funktionierendes http://jsfiddle.net Beispiel, das Ihr Problem demonstriert (falls wir es falsch verstehen). –

+1

Zu Ihrer Bearbeitung: 'input' Elemente haben keine Ende-Tags in HTML. Punkt. Hier ist [Chrome's Darstellung einer '$ .append()' Operation] (https://jsfiddle.net/qj07su51/): '

This is to be appended.
'. Kein schließendes Tag, wie Chrome es darstellt. Wenn Sie dies nicht sehen, müssen Sie ein minimal brauchbares Beispiel erstellen, das das Problem veranschaulicht, damit es im Detail überprüft werden kann. Ich vermute jedoch, dass Ihr ASP (oder was auch immer es ist) Code es tut. Sie sollten wahrscheinlich auch das passende Tag für die Frage hinzufügen. –

Antwort

0

In der Regel haben Eingaben kein schließendes Tag und verwenden stattdessen das Wertattribut. Was passiert, wenn Sie statt anhängen, ändern Sie die val() der Eingabe. Der Textbereich wäre besser dafür geeignet, das Öffnen und Schließen mit einem Bereich für die Eingabe zu haben, wenn Sie das brauchen.

wrapper.val($monthPickerHeaderHtml); 

hier ist ein in Verbindung stehender Artikel i gefunden: closing HTML input tag issue

+0

Ich glaube, Sie haben meine Frage missverstanden, ich möchte nicht den Wert meiner Eingabe HTML-Feld festlegen, ich möchte meine benutzerdefinierte HTML danach anhängen. aber irgendwie fügt jquery es ein, weil es kein ending-input-tag finden kann, wenn es stattdessen zuerst ein ending-tag und dann mein html nach diesem ending-tag anhängen soll. – LeonidasFett

+0

Stimmt, ich habe falsch verstanden, aber ich denke, dass die Frage durch das Verständnis von leeren Elementen beantwortet wird. http://w3c.github.io/html-reference/syntax.html#void-element – TylerT

Verwandte Themen