[Erledigt] JQuery findet Dynamisch erzeugte IDs nicht

Erledigt - JQuery findet Dynamisch erzeugte IDs nicht | PSD-Tutorials.de

Erstellt von Daniel_Knecht, 05.08.2019.

  1. Daniel_Knecht

    Daniel_Knecht PSD-Mitglied

    Dabei seit:
    21.06.2005
    Beiträge:
    432
    Geschlecht:
    männlich
    Ort:
    Zwickau/Sachsen
    Software:
    Cinema 4D, Adobe Collection CS6, Microsoft Office, Visual Studio
    JQuery findet Dynamisch erzeugte IDs nicht
    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:
    1. <div id="fileUpload_field">
    2.                                     <div class="fileUpload_button">BROWSE...
    3.                                         <input type="file" id="1" class="upload" name="uploadPreviews[]" />
    4.                                     </div>
    5.                                     <input id="uploadPreview_1" class="fileUpload_text" value="Nothing selected..." readonly />
    6.                                     <a href="javascript:void(0);" class="fileUpload_add"><i class="fas fa-plus"></i></a>
    7.                                 </div>
    JQUERY
    Code (Text):
    1. $(document).ready(function(){
    2.     var maxField = 6; //Input fields increment limitation
    3.     var wrapper = $('.upload_wrapper'); //Input field wrapper
    4.     var addButton = $('.fileUpload_add'); //Add button selector
    5.     //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
    6.     var x = 1; //Initial field counter is 1
    7.     var i = 1;
    8.    
    9.     //Once add button is clicked
    10.     $(addButton).click(function(){
    11.         //Check maximum number of input fields
    12.         if(x < maxField){
    13.             x++; //Increment field counter
    14.             i++;
    15.             $(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
    16.         }
    17.     });
    18.    
    19.     //Once remove button is clicked
    20.     $(wrapper).on('click', '.fileUpload_del', function(e){
    21.         e.preventDefault();
    22.         $(this).parent('div').remove(); //Remove field html
    23.         x--; //Decrement field counter
    24.     });
    25.    
    26.     $('input[type=file][name="uploadPreviews[]"]').change(function(e){
    27.         if (e.target.id == 1) {
    28.             alert('id: '+e.target.id);
    29.             $("#uploadPreview_1").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    30.         }
    31.         if (e.target.id == 2) {
    32.             alert('id: '+e.target.id);
    33.             $("#uploadPreview_2").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    34.         }
    35.         if (e.target.id == 3) {
    36.             alert('id: '+e.target.id);
    37.             $("#uploadPreview_3").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    38.         }
    39.         if (e.target.id == 4) {
    40.             alert('id: '+e.target.id);
    41.             $("#uploadPreview_4").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    42.         }
    43.         if (e.target.id == 5) {
    44.             alert('id: '+e.target.id);
    45.             $("#uploadPreview_5").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    46.         }
    47.         if (e.target.id == 6) {
    48.             alert('id: '+e.target.id);
    49.             $("#uploadPreview_6").attr('value', this.value.replace(/C:\\fakepath\\/, ''));
    50.         }
    51.     });
    52. });
    Ich hoffe ihr könnt mir weiterhelfen.
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. owieortho

    owieortho Aktives Mitglied

    Dabei seit:
    25.06.2010
    Beiträge:
    722
    Geschlecht:
    männlich
    Ort:
    9.8241,51.3515
    Software:
    PS CS5, HomeSite
    Kameratyp:
    Casio EX-FH20
    JQuery findet Dynamisch erzeugte IDs nicht
    Meines Wissens müssen id-Werte mit Buchstaben beginnen. Möglicherweise stört sich etwas an id="1" ?!?

    2ct.
    O.
     
    #2      
  4. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.229
    Geschlecht:
    männlich
    Ort:
    Ö
    JQuery findet Dynamisch erzeugte IDs nicht
    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 (Text):
    1.  
    2. $('#fileUploadFiled').on('change', 'input[type=file]', function() {});
    3.  
     
    #3      
  5. Daniel_Knecht

    Daniel_Knecht PSD-Mitglied

    Dabei seit:
    21.06.2005
    Beiträge:
    432
    Geschlecht:
    männlich
    Ort:
    Zwickau/Sachsen
    Software:
    Cinema 4D, Adobe Collection CS6, Microsoft Office, Visual Studio
    JQuery findet Dynamisch erzeugte IDs nicht
    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 (Text):
    1. $('#fileUpload_field').on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
    2.         if (e.target.id == 1) {
    3.             alert('id: '+e.target.id);
    4.         }
    5.         if (e.target.id == 2) {
    6.             alert('id: '+e.target.id);
    7.         }
    8.         //...
    9.     });
    Edith sagte:
    Jetzt klappt es... So funktioniert es bei mir nun :)
    Code (Text):
    1. $(this).on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
    2.         if (e.target.id == 1) {
    3.             alert('id: '+e.target.id);
    4.         }
    5.         if (e.target.id == 2) {
    6.             alert('id: '+e.target.id);
    7.         }
    8.         //...
    9.     });
     
    #4      
  6. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.229
    Geschlecht:
    männlich
    Ort:
    Ö
    JQuery findet Dynamisch erzeugte IDs nicht
    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 (Text):
    1.  
    2. $('.upload_wrapper').on('change', 'input[type=file][name="uploadPreviews[]"]', function(e) {
    3.  
    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.
     
    #5      
    lachender_engel gefällt das.
Seobility SEO Tool
x
×
×