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...
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 '
Machen Sie bitte auch ein funktionierendes http://jsfiddle.net Beispiel, das Ihr Problem demonstriert (falls wir es falsch verstehen). –
Zu Ihrer Bearbeitung: 'input' Elemente haben keine Ende-Tags in HTML. Punkt. Hier ist [Chrome's Darstellung einer '$ .append()' Operation] (https://jsfiddle.net/qj07su51/): '