1

Estou criando uma galeria de imagens com JQuery e PHP. Todas as funções (upload, load, load more) funcionam normal exceto a que deve excluir a imagem.

O evento deveria ocorrer quando o botão de class "button-remove-image-galeria" ser pressionado, mas nada acontece, nem os alerts que colocou não são executados.

Código 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>
5
  • tenta usar o .on assim: $('.button-remove-image-galeria').on('click', function () { ... });
    – Enio
    Commented 18/08/2017 às 17:10
  • Ja tentei utilizar desse jeito, mas sem sucesso.
    – ayelsew
    Commented 18/08/2017 às 17:12
  • Provavelmente tem haver com o que o @usuario falou, veja essa pergunta. Commented 18/08/2017 às 17:15
  • @ThomsonTorvalds Em seu console retorna algum erro?
    – Enio
    Commented 18/08/2017 às 17:16
  • O console fica limpo.
    – ayelsew
    Commented 18/08/2017 às 17:20

1 Resposta 1

2

Teu problema é clássico (quase todo mundo acaba passando por esse problema). Eu mesmo já perdi horas com isso algumas vezes. Você está adicionando os elementos no DOM após o bind do clique (pois eles são adicionados no retorno da chamada ajax).

Para elementos adicionados dinamicamente no DOM, você pode fazer dessa forma:

$('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');
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .