Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - JQuery findet Dynamisch erzeugte IDs nicht

Daniel_Knecht

PSD-Mitglied

Hallöchen,
ich melde mich mal wieder mit einem Problem"chen" welches mich schon seit einigen tagen "Ausbremst".
Und zwar erstelle ich mit JQuery Dynamich mehrere Input felder (welche ich via CSS geändert habe. Das ist soweit alles kein Problem und Funktioniert auch.

Nun ist mein Problem jedoch das ich den Dateinamen der Datei die ich auswähle ab dem 2. Input nicht mehr angezeigt bekomme.
An den IDs welche ich mit JQuery (Variable i) erzeuge liegt es nicht. Ich bin mittlerweile auch ratlos was ich noch machen könnte um dies zum laufen zu bekommen.

Wie gesagt das erste Input funktioniert (Ist auch Fest im HTML Code eingetragen. Ab dem 2. Input welche Dynamisch ereugt werden klappt es nicht. Die Dateien sind ausgewählt werden aber wie gesagt nicht angezeigt.

HTML/PHP
PHP:
<div id="fileUpload_field">
                                    <div class="fileUpload_button">BROWSE...
                                        <input type="file" id="1" class="upload" name="uploadPreviews[]" />
                                    </div>
                                    <input id="uploadPreview_1" class="fileUpload_text" value="Nothing selected..." readonly />
                                    <a href="javascript:void(0);" class="fileUpload_add"><i class="fas fa-plus"></i></a>
                                </div>

JQUERY
Code:
$(document).ready(function(){
    var maxField = 6; //Input fields increment limitation
    var wrapper = $('.upload_wrapper'); //Input field wrapper
    var addButton = $('.fileUpload_add'); //Add button selector
    //var fieldHTML = '<div id="fileUpload_field"><div class="fileUpload_button">BROWSE...<input type="file" class="upload" name="uploadPreviews[]" /></div><input id="uploadPreviews" class="fileUpload_text" value="Nothing selected..." readonly /><a href="javascript:void(0);" class="fileUpload_del"><i class="fas fa-minus"></i></a></div>'; //New input field html
    var x = 1; //Initial field counter is 1
    var i = 1;
    
    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){
            x++; //Increment field counter
            i++;
            $(wrapper).append('<div id="fileUpload_field" style="margin-top:5px"><div class="fileUpload_button">BROWSE...<input type="file" id="'+i+'" class="upload" name="uploadPreviews[]" /></div><input id="uploadPreview_'+i+'" class="fileUpload_text" value="Nothing selected..." readonly /><a href="javascript:void(0);" class="fileUpload_del"><i class="fas fa-minus"></i></a></div>'); //Add field html
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on('click', '.fileUpload_del', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
    
    $('input[type=file][name="uploadPreviews[]"]').change(function(e){
        if (e.target.id == 1) {
            alert('id: '+e.target.id);
            $("#uploadPreview_1").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
        if (e.target.id == 2) {
            alert('id: '+e.target.id);
            $("#uploadPreview_2").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
        if (e.target.id == 3) {
            alert('id: '+e.target.id);
            $("#uploadPreview_3").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
        if (e.target.id == 4) {
            alert('id: '+e.target.id);
            $("#uploadPreview_4").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
        if (e.target.id == 5) {
            alert('id: '+e.target.id);
            $("#uploadPreview_5").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
        if (e.target.id == 6) {
            alert('id: '+e.target.id);
            $("#uploadPreview_6").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
        }
    });
});

Ich hoffe ihr könnt mir weiterhelfen.
 

Myhar

Hat es drauf

Seit HTML5 (also schon seit ein paar Jahren) dürfen ID auch mit Zahlen beginnen.

Das Problem des TE ist, dass eventlistener natürlich nur für die Elemente gelten, die zur Zeit der definition bereits existieren. Die gelten nicht für nachträglich hinzugefügte Elemente.
Hier gibt es ein paar Lösungen:
Man bindet nach dem hinzufügen die eventlistener auf die neuen Elemente (hier aufpassen, dass nicht bereits vorhandene Elemente den Eventlistener ein zweites Mal zugewiesen bekommen)

Man verwendet event delegation, in deinem Fall also zb:
Code:
$('#fileUploadFiled').on('change', 'input[type=file]', function() {});
 

Daniel_Knecht

PSD-Mitglied

Vielen dank erst mal für die Antworten.
Doch irgendwie scheint das auch nicht zu funktionieren.

Lange Arbeite ich mit JQuery noch nicht.

So habe ich es jetzt gerade. Ist doch so Richtig oder habe ich da was falsch verstanden?
Code:
$('#fileUpload_field').on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
        if (e.target.id == 1) {
            alert('id: '+e.target.id);
        }
        if (e.target.id == 2) {
            alert('id: '+e.target.id);
        }
        //...
    });

Edith sagte:
Jetzt klappt es... So funktioniert es bei mir nun :)
Code:
$(this).on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
        if (e.target.id == 1) {
            alert('id: '+e.target.id);
        }
        if (e.target.id == 2) {
            alert('id: '+e.target.id);
        }
        //...
    });
 

Myhar

Hat es drauf

Ach gar nicht gesehen, du hast hier noch Fehler in deinem Skript: Du hängst die generierten Felder ja nicht an "#fileUpload_field" sondern an den ".upload_wrapper" (wo auch immer der ist)
Dann muss es natürlich
Code:
$('.upload_wrapper').on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
heißen.
Du hängst übrigens immer ein '<div id="fileUpload_field">' mit an, das ist so falsch, eine ID darf nur einmal pro Dokument vorkommen. Verwende hier besser eine Klasse. Oder verwende die ID für das Element wo du die Elemente anhängst, du willst die Elemente schließlich nur einmal wo anhängen.

Dein Code mit $(this) funktioniert, aber ich denke, du weißt nicht, worauf sich "(this)" hier bezieht, das sollte sich auf window beziehen. Sicher, es funktioniert, ist aber viel zu überdimensioniert, besser du schränkst deinen Code so ein, dass nur die Elemente überwacht werden die notwendig sind.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben