使用jQuery将事件绑定到动态创建的元素 [英] Binding event to dynamically created elements using jQuery

问题描述

我正在上传多张图片，并将其放置在某些div上，这些div必须切换某些类。我是否必须放置在ajax成功函数中添加onclick事件的部分？非常感谢！

我正在使用jqueryon，但似乎不起作用。可能我错过了一些东西

以下是我的代码：

Javascript：

'b $ b

  $（。box-picture-selected> div> div）。 （this）.toggleClass（'image-selected'）; 
}）; 
 
 $（'＃uploadForm'）。submit（function（e）{
 e.preventDefault（）; 
 
 var form = new FormData（$（' （var i = 0; i< files.length; i ++）{
 form。
 var files = document.getElementsByClassName（'pics'）; 
 append（files [+ i +]，files [i] [0]）; //添加收据以形成
} 
 form.append（'action'，'upload-photos' ）; //指定动作
 form.append（'csrfmiddlewaretoken'，'{{csrf_token（）}}'）; 
 $ .ajax（{{b $ url：'{{url（ / b / b）}}'，
 type：'POST'，
 data：form，
 cache：false，
 processData：false，
 contentType： false，
 success：function（data）{
 $ .each（$（data），function（key，value）{
 var displayDiv = document.getElementById（displayPics）; 
 var grid = document.createElement（div）; 
 grid.setAttribute（class， 'col-md-3 col-sm-4 col-xs-6 grid-changes image-selected'）; 
 var picDiv = document.createElement（div）; 
 picDiv.setAttribute（class，'col-xs-12 images-box'）; 
 picDiv.setAttribute（style，'background-image：url（{{url（'fit /？image ='。urlencode（asset（'filestorage / temp'））}}'+'％2F '+ value +'）;'）; 
 displayDiv.appendChild（grid）; 
 grid.appendChild（picDiv）; 
}）; 
}，
 error：function（xhr，desc，err）{
 //我在这里有一些错误处理逻辑
} 
}）; 
}）; 
  

HTML：

 < div id =displayPicsclass =col-xs-12 grid-4-picture> 
 @if（isset（$ files）&&！empty（$ files））
 @foreach（$ files as $ photo）
< div class =col-md- 3 col-sm-4 col-xs-6 grid-changes> 
 
< input type =hiddenvalue ={{url（'fit /？image ='。urlencode（asset（'filestorage / temp /'.$ photo）））}}> 
< / div> 
 @endforeach 
 @endif 
< / div> 
  

解决方案

对于动态创建的元素，您必须使用。live（）然而， live（）已被弃用在1.7中有利于 on（），并在 1.9 中完全删除。 live（）签名：

如果您有更大版本的 jQuery than 1.9 您可以使用 .on 下面是.on函数的签名

  $（document）.on（eventName，selector，function（）{}） ; 
 $ b $（body）。on（click，#YOUR_DYNAMICALLY_CREATED_ELEMENT，function（event）{
 // Do Some stuff 
}）; 
  

解决的版本：

 （'click'，'.box-picture-selected> div> div'，function（event）
 {
 $（this ）.toggleClass（'image-selected'）; 
}）; 
  

I am uploading multiple images and placing them inside some divs which onclick have to toggle some class. Do I have to place the part in which I add the onclick event inside the ajax success function? Thanks a lot!

I am using the jquery "on", but doesn't seem to work . Probably I'm missing something

Here is my code:

Javascript:

$(".box-picture-selected > div > div").on( 'click' , function () {
    $(this).toggleClass('image-selected');
});

$('#uploadForm').submit(function (e) {
    e.preventDefault();

    var form = new FormData($('form')[0]);
    var files = document.getElementsByClassName('pics');
    for (var i=0; i<files.length; i++) {
        form.append("files[" + i + "]", files[i][0]); // add receipt to form
    }
    form.append('action', 'upload-photos'); // specify action
    form.append('csrfmiddlewaretoken', '{{ csrf_token() }}');
    $.ajax({
        url: '{{url("/photos/device")}}',
        type: 'POST',
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data) {
            $.each($(data), function(key, value) {
                var displayDiv = document.getElementById("displayPics");
                var grid = document.createElement("div");
                grid.setAttribute("class", 'col-md-3 col-sm-4 col-xs-6 grid-changes image-selected');
                var picDiv = document.createElement("div");
                picDiv.setAttribute("class" , 'col-xs-12 images-box');
                picDiv.setAttribute("style", 'background-image: url({{ url('fit/?image='.urlencode(asset('filestorage/temp'))) }}' + '%2F' + value + ');'  );
                displayDiv.appendChild(grid);
                grid.appendChild(picDiv);
            });
        },
        error: function(xhr, desc, err) {
            // I have some error handling logic here
        }
    });
});    

HTML:

<div id="displayPics" class="col-xs-12 grid-4-picture">
      @if (isset($files) && !empty($files))
          @foreach ($files as $photo)
              <div class="col-md-3 col-sm-4 col-xs-6 grid-changes">
                  <div class="col-xs-12 images-box" style="background-image: url({{ url('fit/?image='.urlencode(asset('filestorage/temp/'.$photo))) }});"></div>
                  <input type="hidden" value="{{ url('fit/?image='.urlencode(asset('filestorage/temp/'.$photo))) }}">
             </div>
          @endforeach
       @endif
    </div>  

解决方案

For dynamically created element you have to use .live() However, live() was deprecated in 1.7 in favour of on(), and completely removed in 1.9. The live() signature:

If you have greater version of jQuery than 1.9 you can use jQuery.fn.on

I would recommend to use .on below is a signature of .on function

$(document).on( eventName, selector, function(){} );

$("body").on("click", "#YOUR_DYNAMICALLY_CREATED_ELEMENT", function(event){
    //Do Some stuff
});

Solved version:

$("body").on('click', '.box-picture-selected > div > div', function(event)
{
    $(this).toggleClass('image-selected');
});

这篇关于使用jQuery将事件绑定到动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！