e.target Attributes Problem

[Cc_Cc_Cc]

Guten Tag,

ich habe viele Beiträge und unter jedem Beitrag kann man kommentieren oder ein Bild posten. Wenn ich jetzt ein Bild posten möchte klicke ich auf das Foto-Symbol (In Html:

 Spoiler

												<input type="file" name="uploadImageComment" class="inputfile2comment" id="file1comment" data-attr-id="<?= $row['beitrag_id']; ?>">
												
												<label for="file1comment" style="margin-top:-2.5px;color:rgba(73, 223, 210, 1);background-color:#fff;max-width:unset;width:auto;vertical-align:middle;padding:4px;border-radius:8px;">
													<i class="fas fa-camera"></i>
												</label>

Jedes Foto-Symbol hat ein Attribute namens: Data-Attr-Id. Dort wird die Beitrag ID gespeichert. Ich möchte jetzt beim betätigen des Foto-Symbols die Beitrag ID des Foto-Symbols bekommen.

Wenn ich jetzt auf den ersten Beitrag draufklicke, zeigt er mir es an wunderbar. Aber wenn ich jetzt nach unten scrolle zeigt er mir die Beitrag ID Des ersten Beitrages an. Egal welches Symbole ich klicke , es wird immer die gleiche Beitrag ID angezeigt obwohl jedes Data-Attribute eine andere Beitrag ID hat.

JS:

 Spoiler

PHP Code:

            $('.inputfile2comment').on('change', function(e) {
            
            //    var upload = e.target.value;
                
                var id = e.target.getAttribute('data-attr-id');
                
                alert(id);

}); 


Weiß jemand woran es liegt?

[False]

Bitte stell mal ein laufendes Beispiel zur verfügung, das erleichtertet das helfen deutlich ! (Dafür kannst du z.b. jsfiddle nutzen).

Wenn du eh schon Jquery nutzt, kannst du übrings

var id = $(e.target).data("attr-id');

statt

var id = e.target.getAttribute('data-attr-id');

nutzen

[elmarcia]

I think the problem is because he's loading dynamic content when scrolling down, but new content won't work with already registered listeners, so in order to make them work u should add a listener to your new elements, the fast way to do it is remove current class listener and register it again after adding the new content

[False]

Originally Posted by elmarcia

I think the problem is because he's loading dynamic content when scrolling down, but new content won't work with already registered listeners, so in order to make them work u should add a listener to your new elements, the fast way to do it is remove current class listener and register it again after adding the new content

I dont think this is the problem. If that would the problem he would get no id, instead of the same id.
Also he wouldnt need to remove the listener and add it again, he could use

$('body').on('eventName', 'targetSelector', function)

instead of

$('targetSelector').on('eventName', function)

[lnqlorlouz]

Liegt es nicht daran, dass immer das erste gefundene Element den Eventlistener bekommt?
Also müsstest du nicht so etwas in der Art machen:

   var inputs = document.querySelectorAll(".inputfile2comment");
   inputs.forEach(input => {
     input.addEventListener("change", e => 
        console.log(e.target.getAttribute("data-attr-id");
   });

[False]

Originally Posted by lnqlorlouz

Liegt es nicht daran, dass immer das erste gefundene Element den Eventlistener bekommt?
Also müsstest du nicht so etwas in der Art machen:

   var inputs = document.querySelectorAll(".inputfile2comment");
   inputs.forEach(input => {
     input.addEventListener("change", e => 
        console.log(e.target.getAttribute("data-attr-id");
   });

Nein, wenn wenn es mehrere Elemente für den Selector gibt, dann bekommen alle das Event.
(Sofern man Jquery nutzt => Was er tut)

[lnqlorlouz]

Originally Posted by False

Nein, wenn wenn es mehrere Elemente für den Selector gibt, dann bekommen alle das Event.
(Sofern man Jquery nutzt => Was er tut)

Stimmt, da war was. Ich arbeite zum Glück nicht mit jQuery. Die meisten Sachen gehen heutzutage auch so ziemlich einfach, dank Babel und alle neuen Dinge ab ES5.

Ich denke der Threadersteller hat schon eine Lösung(?), falls nicht, bräuchten wir mehr Code oder du setzt mal ein debugger Statement.