Jquery event does not run after click

Question

I am creating an image gallery with Jquery and PHP. All functions (upload, load, load more) work normal except the one that should delete the image.

The event should occur when the "button-remove-image-gallery" class button is pressed, but nothing happens, nor the Alerts you placed are not executed.

Code Jqeury:

    /*The quick brown fox jumps over the lazy dog*/
$(document).ready(function () {
    var b = 0;
    var e = 0;
    load(6);
    $("#img-to-upload").change(function (event) {
        var reader = new FileReader();
        reader.onload = function (file) {
            var url = file.target.result;
            $("#preview-img").attr("src", url);
        };
        reader.readAsDataURL(this.files[0]);
    });


    function load(v) {
        b = b + e;
        e = v;

        $.ajax({
            url: 'sys/php/galeria.php',
            type: 'POST',
            data: {
                'op': 'load',
                'b': b,
                'e': e
            },
            success: function (data, textStatus, jqXHR) {
                if (data.error.img > 0 || data.error.other != null) {
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                } else if (data.error.img == null || data.error.other != null) {
                    tdata = data[0].id.length - 1;
                    for (i = 0; i <= tdata; i++) {
                        newImage(data[0].src[i] + data[0].name[i], data[0].id[i]);
                    }
                } else {
                    msgBox('Error unknown!');
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                }


            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                msgBox('Status: ' + jqXHR.status);
                msgBox('Text error: ' + textStatus);
                msgBox('More: ' + errorThrown);
                msgBox('Response: ' + jqXHR.responseText);
            }
        });
    }

    function newImage(url, id) {
        var li = $('<li></li>').attr('class', 'uploaded-image');
        var divdig = $('<div></div>').attr('class', 'the-image-galeria');
        var imgig = $('<img/>').attr({
            'class': 'image-galeria',
            'src': url,
            'alt': '',
            'title': ''
        });
        var divsig = $('<div></div>').attr('class', 'src-da-imagem-galeria');
        var inputiuig = $('<input/>').attr({
            'class': 'input-url-image-galeria',
            'type': 'url',
            'value': url
        });
        var btnbrig = $('<button></button>').attr({
            'class': 'button-remove-image-galeria',
            'type': 'button',
            'data-id': id
        }).html('x');
        var divrig = $('<div></div>').attr('class', 'remove-image-galeria');
        divrig.html(btnbrig);
        divsig.html(inputiuig);
        li.html(divdig.append(imgig, divsig, divrig));
        $('#list-uploaded-images').append(li);
    }
    function msgBox(msg) {
        $('.msgbox-error-galeria').css('bottom', '3%');
        $('.msgboxs-galeria').append(
                $('<p>' + msg + '</p>').attr('title', msg)
                );
    }
    function deleteImage(id, index) {
        $.ajax({
            url: 'sys/php/galeria.php',
            type: 'POST',
            data: {
                'id': id,
                'op': 'delete'
            },
            success: function (data, textStatus, jqXHR) {
                if (data.error.img > 0 || data.error.other != null) {
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                } else if (data.error.img == null || data.error.other != null) {
                    var indexs = $('.uploaded-image');
                    $(indexs[index]).remove();
                } else {
                    msgBox('Error unknown!');
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                }
            }, error: function (jqXHR, textStatus, errorThrown) {
                msgBox('Status: ' + jqXHR.status);
                msgBox('Text error: ' + textStatus);
                msgBox('More: ' + errorThrown);
                msgBox('Response: ' + jqXHR.responseText);
            }
        });
    }

    function uploadImage(form) {
        var formData = new FormData(form);
        console.debug(formData);
        formData.append('op', 'upload');
        $.ajax({
            url: 'sys/php/galeria.php',
            type: 'POST',
            data: formData,
            cache: false,
            dataType: 'json',
            processData: false, // Don't process the files
            contentType: false, // Set content type to false as jQuery will tell the server its a query string request
            success: function (data, textStatus, jqXHR) {
                if (data.error.img > 0 || data.error.other != null) {
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                } else if (data.error.img == null || data.error.other != null) {
                    newImage(data.src + data.filename, data.id);
                } else {
                    msgBox('Error unknown!');
                    msgBox('File error: ' + data.error.img);
                    msgBox('Sever: ' + data.error.other);
                }


            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
                msgBox('Status: ' + jqXHR.status);
                msgBox('Text error: ' + textStatus);
                msgBox('More: ' + errorThrown);
                msgBox('Response: ' + jqXHR.responseText);
            }
        });
    }
    $('.button-remove-image-galeria').click(function () {
        alert("remove");
        var id = $(this).attr('data-id');
        var index = $(this).index();
        deleteImage(id, index);
        alert('delete executado');
    });

    $('#buttonmoreimagegaleria').click(function () {
        load(6);
        //$('.button-remove-image-galeria').html("khfkjfrhje");
    });
    $('#form-upload-galeria').on("submit", function (e) {
        e.preventDefault();
        uploadImage(this);
    });
    $('.style-buttonout-galeria').click(function () {
        $('.msgboxs-galeria').html("");
        $('.msgbox-error-galeria').css('bottom', '0%');
    });

});

HTML:

        <div class="space-galeria">
            <div class="side-upload-galeria">
                <form id="form-upload-galeria" class="form-upload-galeria" enctype="multipart/form-data" method="POST" action="">
                    <div class="header-form-upload-galeria">
                        <div class="elements-form-galeria">
                            <div class="style-input-galeria"><input id="img-to-upload" accept="image/*" required type="file" name="0"></div>
                            <div class="style-buttonup-galeria"><button id="btnon" type="submit">Upload</button></div>
                        </div>
                        <div class="style-prewview-galeria"><img id="preview-img" class="prewviews-img" src="img/site/img_404.gif" alt="Preview da imagem"></div>
                    </div>
                </form>
            </div>
            <div class="side-uploaded-images">
                <lu id="list-uploaded-images" class="list-uploaded-images">
                   <!-- <li  class="uploaded-image">
                        <div class="the-image-galeria">
                            <img class="image-galeria" src="https://static.pexels.com/photos/28221/pexels-photo-28221.jpg" alt="" title="">
                            <div class="remove-image-galeria">
                                <button class="button-remove-image-galeria" data-id="1" type="button">x</button>
                            </div>
                            <div class="src-da-imagem-galeria">
                                <input class="input-url-image-galeria" type="url" value="https://static.pexels.com/photos/28221/pexels-photo-28221.jpg">
                            </div>
                        </div>
                    </li>-->
                </lu>
            </div>
            <div class="msgbox-error-galeria">
                <div class="msgboxs-galeria">
                    <!--MSG DE ERRO-->
                </div>
                <div class="btnout-msgbox-galeria">
                    <button class="style-buttonout-galeria" type="button">X</button>
                </div>
            </div>
            <div class="button-load-more-image-galeria">
                <button id="buttonmoreimagegaleria" class="button-more-image-galeria" type="button">CARREGAR +</button>
            </div>
        </div>

Answer 1

Your problem is classic (almost everyone ends up going through this problem). I myself have spent hours on it a few times. You are adding the elements in the DOM after the bind click (as they are added in the return of the ajax call).

For elements added dynamically in the DOM, you can do so:

$('body').on('click', '.button-remove-image-galeria', function() {
    alert("remove");
    var id = $(this).attr('data-id');
    var index = $(this).index();
    deleteImage(id, index);
    alert('delete executado');
});