Binding event to dynamically created elements using jQuery

Question

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>

This is not a question about Laravel, you should remove the tag. — Jean-Philippe Murray
– Jean-Philippe Murray, Commented Apr 24, 2017 at 11:47
stackoverflow.com/questions/14679432/jquery-event-delegation — Mohamed-Yousef
– Mohamed-Yousef, Commented Apr 24, 2017 at 11:50

Curiousdev · Accepted Answer · 2017-06-02 07:19:10Z

6

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

edited Jun 2, 2017 at 7:19

answered Apr 24, 2017 at 11:49

Curiousdev

5,7983 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marius Stanciu Over a year ago

Do I have to place that inside the success function of the ajax request or anywhere in my script?

Curiousdev Over a year ago

No not in success function of ajax... replace $(".box-picture-selected > div > div").on( 'click' , function () { $(this).toggleClass('image-selected'); }); this function with a new one as i have added in answer

Curiousdev Over a year ago

just put your element's Class or ID in replace of YOUR_DYNAMICALLY_CREATED_ELEMENT this on which you need to bind click event

Marius Stanciu Over a year ago

I used it as you recommended but when i click on one div, it changes all of them

Marius Stanciu Over a year ago

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

|

Collectives™ on Stack Overflow

Binding event to dynamically created elements using jQuery

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related