Anhängen von Inhalt beim Klicken auf die Schaltfläche

Ich erhalte jedes Mal einen Referenzfehler, wenn ich versuche, diese Geige zu spielen.Anhängen von Inhalt beim Klicken auf die Schaltfläche

Die Funktion soll einen weiteren Radiobutton zum Formular hinzufügen.

Jede Hilfe wäre großartig.

Dank

https://jsfiddle.net/RyeManship/2jtvjd28/

HTML

<section class="content"> 
<div class="radio"> 
    <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
    <input type="text" class="form-control" placeholder="Type Question Here"> 
    </label> 
</div> 
<div class="radio"> 
    <label> 
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
    <input type="text" class="form-control" placeholder="Type Question Here"> 
    </label> 
</div> 
</section> 
<div class="row"> 
    <button type="button" class="btn btn-success" onclick="javascript:AddQuestion()">Add</button> 
    <button type="button" class="btn btn-danger">Remove</button> 
    <button type="button" class="btn btn-info">Submit Question</button> 
</div>

Javascript

function AddQuestion() { 
$(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>'); 
};

Quelle

2016-12-21 RyeGuy

Hallo, gerade in den JavaScript-Optionen ändern -> Lasttyp -> set "keine Wrap in Körper" (oder Kein Umbruch im Kopf): https://jsfiddle.net/2jtvjd28/2/ – briosheje

https://jsfiddle.net/2jtvjd28/3/ Sie müssen nur den Code zu '' anstelle von 'Load' hinzufügen. –

Es ist, weil Sie Ihre Geige Setup falsch ist. Bei Verwendung eines on* Ereignisattributs muss die Funktion innerhalb des Bereichs window liegen. Sie müssen daher in den JS-Einstellungen von onLoad in No Wrap - in <head> "Ladeart" ändern.

Fixed fiddle

Beachten Sie, dass eine viel bessere Lösung vollständig wäre, nicht veraltet Ereignis verwenden, um alle Attribute und ersetzen sie durch unauffällige Event-Handler. Dies führt zu einer viel besseren Trennung von Bedenken, da HTML und JS jetzt vollständig getrennt sind. Wie Sie bereits jQuery verwenden, ist hier, wie Sie das tun können:

$(function() { 
 
    $('.add').click(function() { 
 
    $(".content").append('<div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked><input type="text" class="form-control" placeholder="Type Question Here"></label></div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<section class="content"> 
 
    <div class="radio"> 
 
    <label> 
 
     <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
 
     <input type="text" class="form-control" placeholder="Type Question Here"> 
 
    </label> 
 
    </div> 
 
    <div class="radio"> 
 
    <label> 
 
     <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 
 
     <input type="text" class="form-control" placeholder="Type Question Here"> 
 
    </label> 
 
    </div> 
 
</section> 
 
<div class="row"> 
 
    <button type="button" class="btn btn-success add">Add</button> 
 
    <button type="button" class="btn btn-danger">Remove</button> 
 
    <button type="button" class="btn btn-info">Submit Question</button> 
 
</div>

Quelle

2016-12-21 16:14:52

Ich schätze die Hilfe sehr! Ich habe meine Geige aktualisiert, aber die Remove-Funktion funktioniert nicht, aber es treten keine Fehler in der Konsole auf. Irgendwelche Vorschläge? https://jsfiddle.net/RyeManship/2jtvjd28/5/ – RyeGuy

Drei Probleme dort. Sie müssen Ihren Code in einen document.ready-Handler einfügen. 'this' bezieht sich auf die angeklickte Schaltfläche und keine der Zeilen ist die' parent() 'dieser Schaltfläche. '.content' ist nicht das übergeordnete Element der Schaltfläche. Daher müssen Sie' .row' als delegierten Ereignishandler verwenden. Angenommen, Sie möchten die zuletzt hinzugefügte Zeile entfernen: https://jsfiddle.net/2jtvjd28/6/ –

Sie sind der Mann !!! – RyeGuy

Anhängen von Inhalt beim Klicken auf die Schaltfläche

Antwort

Verwandte Themen