Erledigt - JQuery findet Dynamisch erzeugte IDs nicht

[Daniel_Knecht]

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

<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

$(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.

 

[owieortho]

Meines Wissens müssen id-Werte mit Buchstaben beginnen. Möglicherweise stört sich etwas an id="1" ?!?

2ct.
O.

 

[Myhar]

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:

$('#fileUploadFiled').on('change', 'input[type=file]', function() {});

 

[Daniel_Knecht]

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?

$('#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

$(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]

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

$('.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.