Question

我的借口：首先，我想解释一下，我一直在寻找答案。我发现了很多类似的问题，但没有一个问题可以解决我的问题。

问题：在Ajax调用之后，我在dinamicaly中添加了HTML代码，添加的代码会丢失其样式和操作响应（例如，点击）。

HTML：加载页面加载的HTML。它正确呈现用户图像的集合。我的意思是......样式很好，JS函数绑定到类＆visual;视觉图像＆＃39;和＆＃39; deletaImagem＆＃39;工作正常。

<div class="row">
    <div class="col-sm-12" id='imagens'>
        <?php 
        if(isset($imagens)){

            if(count($imagens) > 0){

                foreach($imagens as $imagem){

                    echo "
                    <div class='file-box' data-path='" . $imagem['path'] . "' id='" . $imagem['nome'] . "'>
                        <div class='file'>
                            <a class='visualizaImagem' data-path='". $imagem['path'] ."'>
                                <div class='icon'>
                                    <img src='../" . $imagem['path'] . "' style='height:100%'>
                                    <a class='deletaImagem' data-path='". $imagem['path'] ."' data-divid='" . $imagem['nome'] . "'>
                                        <i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'></i>
                                    </a>
                                </div>
                                <div class='file-name'> " . $imagem['nome'] . "</div>
                            </a>
                        </div>
                    </div>";
                }
            }
        }
        ?>
    </div>
</div>

JS：当我点击上传按钮（不是此代码的一部分）时，图像数据通过＆＃34;数据：dados＆＃34;，由＆＃34; salvaImagem＆＃34;在特定的控制器中，而不是附加到页面。实际上附加了图像，但没有css样式，也没有对应该绑定到上面显示的相同类的函数的响应。

jQuery.ajax({
        type: "POST",
        url: "salvaImagem",
        data: dados,
        dataType: "json"}).done(function(response)
        {
            if(response.sucesso){

                toastr['success'](response.msg);

                var img = "" +
                        "<div class='file-box' id='" + response.nome + "' data-path='" + response.path + "'>" +
                        "   <div class='file'>" +
                        "       <a class='visualizaImagem' data-path='"+response.path+"'>" +
                        "           <div class='icon'>" +
                        "               <img src='../"+response.path+"' style='height:100%'>" +
                        "               <a class='deletaImagem' data-path='"+response.path+"' data-divid='"+response.nome+"'>" +
                        "                   <i class='fa fa-trash' style='position:absolute;top:10px;left:10px;font-size:18px;'>" +
                        "               </a>" +
                        "           </div>" +
                        "           <div class='file-name'> "+response.nome+"</div>" +
                        "       </a>" +
                        "   </div>" +
                        "</div>";

                $('#imagens').append(img);
            }
            else{
                toastr['error'](response.msg);
            }
        });

我想我应该多给一些代码。这是我如何将函数绑定到这些类的示例。实际上，当我在bind中编写函数时，我期望重新绑定是不必要的。

$('.deletaImagem').on('click', function (){
    var path = $(this).data('path');
    var div_id = $(this).data('divid');

    jQuery.ajax({
        type: "POST",
        url: "deletaImagem",
        data: {'path':path},
        dataType: "json"}).done(function(response)
        {
            if(response.sucesso){

                toastr['success'](response.msg);
                $('#'+div_id).remove();                 
            }
            else{
                toastr['error'](response.msg);
            }
        });
    return false;
});

尝试使用朋友在这里给我的一些提示，我尝试了以下方法，但也没有成功。

jQuery.ajax({
        type: "POST",
        url: "salvaImagem",
        data: dados,
        dataType: "json"}).done(function(response)
        {
            if(response.sucesso){

                toastr['success'](response.msg);

                var img = <HTML original code here>

                $(img).appendTo('#imagens').find('.deletaImagem').on('click', deletaImagem);
                $('.visualizaImagem').on('click', visualizaImagem);
            }
            else{
                toastr['error'](response.msg);
            }
        });

 function deletaImagem(){
    var path = $(this).data('path');
    var div_id = $(this).data('divid');

    jQuery.ajax({
        type: "POST",
        url: "deletaImagem",
        data: {'path':path},
        dataType: "json"}).done(function(response)
        {
            if(response.sucesso){

                $('#'+div_id).remove(); 
                toastr['success'](response.msg);
            }
            else{
                toastr['error'](response.msg);
            }
        });
    return false;
}

Answer 1

由于我假设您在document.ready上绑定事件（单击等等），以后添加的任何新项目都不会有这些事件。

添加新项目后，只需再次添加事件。

$('#something').append("<div class='somethingWithClicklistener'>a</div>"); // It won't have the event, you have to add it
$('.somethingWithClicklistener').click(function(){ etc..

虽然这种方法可能会使预先存在的类上的事件处理程序加倍，但是你明白了这一点

至于样式，除非你使用jquery动画等，否则它不会发生......

Answer 2

如果你得到一个ajax响应作为html，你必须在你输入你的html（从ajax收到）的巫婆相对于你的根元素编写你的javascript代码。

1

<div class="some-root-div">
    // the place where you put your html from response
</div>

你应该像这样添加html：$('#imagens').append($(img));

3

(function($){
    "use strict";
    $('.some-root-div', '.deletaImagem').on('click', function(){
        // your logic on `.deletaImagem` link click
    })
})(jQuery);

Answer 3

您的问题是事件处理程序未附加到新元素。将元素附加到DOM时，这样做非常简单。

更改此

$('#imagens').append(img);

到

$(img).appendTo('#imagens').find('.deletaImagem').on('click', function (){
    var path = $(this).data('path');
    var div_id = $(this).data('divid');

    jQuery.ajax({
        type: "POST",
        url: "deletaImagem",
        data: {'path':path},
        dataType: "json"}).done(function(response)
        {
            if(response.sucesso){

                toastr['success'](response.msg);
                $('#'+div_id).remove();                 
            }
            else{
                toastr['error'](response.msg);
            }
        });
    return false;
});

Answer 4

我来过这里。我的解决方案和理解是AJAX结束时/ javascript期间，javascript在CSS之后出现。我最终设置了需要在javascript中最具动态性的样式，其中的函数将元素作为参数。就像一个魅力！

function styleElement(elem){
    elem.style.visibility = "hidden";
}

在Ajax调用之后，CSS和JQuery无法工作

4 个答案: