Sobald neues Element erstellt wird, funktioniert kein Javascript

Cc_Cc_Cc · 10/18/2018, 01:43

Hi,

sobald ich ein neues Element erstelle, funktioniert keine Javascript Funktion. Hat einer Ahnung woran das liegt?

Bsp:

Ich habe kein Profilbild drinne. Ich lade eins Hoch. Nachdem es erfolgreich hochgeladen wurde, soll ein Element erstellt werden wo steht: Foto entfernen. Wenn ich jetzt draufklicke passiert nichts. Er gibt mir nicht mal alert('hallo') aus.

So sieht es aus:

HTML

Spoiler

Javascript

Spoiler

PHP Code:



            <script>
            
                $(document).ready(function() {
                
                // UPLOAD IMAGE //
                
                    $('.upload_image_input').on('change', function(event) {
                    
                        var upload = event.target.value;
                        
                        if(upload != '') {
                            
                            $.ajax({
                            
                                type: 'POST',
                                url: '../../pages/upload_image/upload_image.php',
                                data: new FormData($($('.change_image_form_092'))[0]),
                                async: false,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function(data) {
                                    $('#js-modal-upload').html(data);
                                //    $('#modal-upload-image').removeClass('show-modal-upload');
                                
                                // CREATE ELEMENT LI //
                                    var para = document.createElement("li");
                                    para.className = 'modal-upload-image-item-two';
                                    para.setAttribute('id', 'js-behavoir-two');
                                    var element = document.getElementById('js-ul');
                                    
                                    element.insertBefore(para, element.childNodes[2]);
                                    
                                // CREATE FORM //
                                    
                                    var para2 = document.createElement("form");
                                    para2.className = 'delete_image_form_092';
                                    para2.setAttribute('method', 'POST')
                                    para2.setAttribute('id', 'js_form_upload');
                                    
                                    var element2 = document.getElementById('js-behavoir-two');
                                    element2.appendChild(para2);
                                    
                                // CREATE BUTTON //
                                
                                    var para3 = document.createElement("button")
                                    para3.setAttribute('type', 'button');
                                    para3.setAttribute('value', '28');
                                    para3.className = 'delete_foto_092';
                                
                                    var node3 = document.createTextNode('Foto entfernen');
                                    para3.appendChild(node3);
                                    
                                    var element3 = document.getElementById('js_form_upload');
                                    element3.appendChild(para3);
                                    
                                }
                            
                            });
                            
                        }
                    
                    });
                
                // DELETE IMAGE //
                
                    $('.delete_foto_092').on('click', function() {
                        alert('hI');
                        var button = $(this).val();
                            
                            $.ajax({
                            
                                type: 'POST',
                                url: '../../pages/delete_image/delete_image_092.php',
                                data: {button:button},
                                success: function(data) {
                                    $('#js-modal-upload').html(data);
                                //    $('#modal-upload-image').removeClass('show-modal-upload');
                                }
                            
                            });

                    });
                
                });
            </script>

florian0 · 10/18/2018, 12:12

Das Problem ist, das dein JavaScript Click Handler nicht automatisch auf alle .delete_foto_092 hinzugefügt wird, sondern nur auf die, die zum Zeitpunkt des Aufrufs bereits existieren. Wenn du nachträglich ein neues Element hinzufügst, hat das keinen Click Handler.

>

Code:

var newbutton = document.createElement('button');
// ...

// JQuery Solution
$(newbutton).on("click", onnewbutton);

// Pure JS Solution
newbutton.addEventListener("click", onnewbutton);

Mit Lösung:
>

Cc_Cc_Cc · 10/18/2018, 15:59

Quote:
Originally Posted by florian0
Das Problem ist, das dein JavaScript Click Handler nicht automatisch auf alle .delete_foto_092 hinzugefügt wird, sondern nur auf die, die zum Zeitpunkt des Aufrufs bereits existieren. Wenn du nachträglich ein neues Element hinzufügst, hat das keinen Click Handler.

>
Code:
var newbutton = document.createElement('button');
// ...

// JQuery Solution
$(newbutton).on("click", onnewbutton);

// Pure JS Solution
newbutton.addEventListener("click", onnewbutton);
Mit Lösung:
>

Perfekt, danke dir hat geklappt!

False · 10/18/2018, 19:44

Quote:

Originally Posted by Cc_Cc_Cc

Perfekt, danke dir hat geklappt!

Nur zur Ergänzung du kannst auch

Code:

$('body').on('click', 'Selector', function)

machen.
Damit werden ALLE (auch die erst noch erzeugt werden) Elemente mit dem Selector getriggert.
Beispiel: