[jquery]script wordt niet gezien op toegevoegde input field

[Paultje3181]

Ik heb met een jquery-script een input-field toegevoegd aan een form met:

JavaScript:

<script>
// Veld toevoegen bij E-mail of SMS
jQuery(document).ready(function() {
    jQuery('#info').on('change',function() {       
        var informeren = jQuery('#info').val();
    var wrapper = jQuery('#mailinfo');
        if (informeren == "mail") {
        jQuery('#infobox').remove();
        jQuery('#info').addClass('infochoice');
        var mailbox = jQuery(wrapper).append('<input type="email" class="infomail" id="infobox" name="mailaddress" placeholder="Vul hier het e-mailadres in." />'); //add input box
        } else if (informeren == "sms") {
        jQuery('#infobox').remove();
        jQuery('#info').addClass('infochoice');
        var mailbox = jQuery(wrapper).append('<input type="number" id="infobox" class="infomail" name="mobnummer" placeholder="Vul hier het mobiele nummer in." />'); //add input boxmailbox.type = "number";
        }
        else {
        jQuery('#info').removeClass('headinginfo');
        jQuery('#infobox').remove();
    }
        });
});
</script>

Als ik deze vervolgens uit wil lezen en in een ander veld wil stoppen, doet ie het niet. Met console.log gekeken of het script uberhaupt start, wat ie dus niet doet.

JavaScript:

<script>
//Kopieren mail adres
jQuery(document).ready(function() {
jQuery('#infobox').on('change',function() {
        var printmail = jQuery('#infobox').val();
    console.log('printmail');
        jQuery('#mail').val('printmail');
    });
});
</script>

In de console wordt helemaal niks geprint, hetgeen me doet vermoeden dat de infobox niet in de DOM staat, maar hoe ik dit dan op kan lossen? Ik zal wel verkeerd googlen, maar ik kom er niet uit.

Iemand die me de goede kant uit kan sturen?

[TERW_DAN]

Staat infobox in je DOM? en wat voor element is dat dan?

[Paultje3181]

Als ik op de box rechtsklik en op "Inspecteren" klik, staat ie er wel. Het is een input-box met als type of email of number. Dit bedoel je toch?

[The_Ghost16]

Omdat je tweede script wordt uitgevoerd bij document ready wordt het onchange event gebind bij het laden van de pagina. Op het moment dat dus het infobox element later aan de DOM wordt toegevoegd zal deze niet het onchange event gebind krijgen.

Je kunt dit oplossen door in het tweede script niet de on functie aan te roepen op de #infobox maar op #mailinfo. In de functie call zet je dan een extra parameter (als 2e) die dan je element selector is voor het change event (dit is #infobox).

Dit zorgt er voor dat er een event listener zit op de wrapper die ieder element met de gespecificeerde selector het change event geeft.

Zie http://api.jquery.com/on/

[sig69]

Op het moment dat je

JavaScript:

jQuery('#infobox').on('change',function() {

runt bestaat de input met id infobox niet. Je zal iets als

JavaScript:

$(document).on("change", "#infobox", function(){
});

moeten gebruiken volgens mij

[Paultje3181]

Het werkt nu dankzij The_Ghost16 en sig69

[epic007]

Lijkt mij simpeler/handiger om beide inputs gewoon in je HTML te zetten en ze via jQuery selectief te tonen of verbergen. (.show(), .hide())

[Verwijderd]

Waarom gebruiken mensen voor de simpelste zaken vaak een draak als jquery?
Je kunt zelf toch wel even iets in elkaar scripten?

[TI_Observer]

Verwijderd schreef op donderdag 24 december 2015 @ 22:58:
Waarom gebruiken mensen voor de simpelste zaken vaak een draak als jquery?
Je kunt zelf toch wel even iets in elkaar scripten?

ik denk niet dat jij helemaal begrijpt waarom mensen libraries of frameworks maken. JUIST om het makkelijker te maken. Weet je hoeveel code je meer moet schrijven wil je dit in vanille javascript schrijven? Ben je bang dat je een hele library nodig hebt als je maar een deel gebruikt? Prima, er zijn zat mogelijkheden om alle jquery code te scrappen die niet gebruikt wordt in de code die jij geschreven hebt

[Paultje3181]

Het werkt ondertussen. En de reden dat ik jquery gebruik is dat er specifieke velden gebruikt worden om waarden uit te lezen op basis van de ID. En ik niet weet hoe groot die max waarde is. Dan lastig in de DOM te krijgen volgens mij.

En omdat ik toch iets moest leren om een clientside script te schrijven.

En de draak is waarschijnlijk eerder mijn code, dan jquery

[Verwijderd]

Paultje3181 schreef op vrijdag 25 december 2015 @ 12:05:En de draak is waarschijnlijk eerder mijn code, dan jquery

Hoeveel bytes is Jquery en hoeveel bytes is jouw code bovenop Jquery?
Bij lastige zaken begrijp ik het wel, maar een paar veldjes in een formuliertje met een id. Het is toch een beetje schieten met een kanon op een mug. Dat werkt wel, maar ja .... optimaal is anders.
Het heeft ook steeds minder met programmeren te maken, het verwordt tot instellen.