can't get click event of div element in jquery

Question

This problem is so weird and the title might not seem to fully explain the meaning, so this is what i mean, i have list of div nested in each other and i can get the click event and other event of the outer Div but can't get the click event and other event of the inner div and it's content. below is my code

    var scrollWidth = 124;
var currentPhoto;
var defaultDisplayPhoto = 5;
var maxScrollCount=0;
var maxScroll =(scrollWidth*currentPhoto)-(scrollWidth*defaultDisplayPhoto);
var maxScroll;
var timeCounter;
var duration = 1000; //time to wait to fire the event;
var photoAllowed = 12;
var canAddMore;

var eventCounter= [];    
            $("input.upload").on('change',function(event){
               $(".mycarousel-container").show();
               if(eventCounter){
                   i=eventCounter.length;
               }else{
                   i=0;
               }
               imgsrc = URL.createObjectURL(event.target.files[0]);
               //for(var i=0; i <eventCounter.length; i++)
var div = $("<div class='mycarousel' style='left:"+left+"px' id='picture"+i+"'></div>");
               var transparentDiv = $("<div class='transparent'></div>");
 var deleteIcon = $("<span class=\"deletebutton\"><i class=\"glyphicon glyphicon-trash\"></i></span>");
               var imgPreview = "<img  class='myimg' src="+imgsrc+">"
               transparentDiv = transparentDiv.html(deleteIcon);
               div = div.html(transparentDiv);
               div = div.append(imgPreview);
               $(".carouser-inner").append(div);

               left = left+120;

               eventCounter.push(imgsrc);
               if(eventCounter.length>5){
                    $("#carousel_control_left").show();
                    $("#carousel_control_left").addClass('myActive');
                    scrollThumb('Go_R');
                }else{
                    $("#carousel_control_left,#carousel_control_right").hide();
                }

                if(eventCounter.length == 12){
                    alert('end')
                    $("input.upload").attr('disabled',true);
                }else{
                    $("input.upload").attr('disabled',false);
                }

           });


      $('.mycarousel').click(function(){
        alert('this is inner div with border color blue');
      });
      $('.myimg').click(function(){
       alert('this is inner image');
      });

DEMO ON FIDDLE please see the demo on fiddle and add some images and divs will show up, now try to get the click event of the div with border color BLUE or the image in it

score 3 · Accepted Answer · answered Jul 25 '16 at 11:54

3

use $(document).on cause when you assign your click event , div element is not in DOM yet

 $(document).on( 'click', '.mycarousel', function () {
        alert("here");
   });

answered Jul 25 '16 at 11:54

Özgür Ersil

6,909
3
19
29

thank so much, this works great – sam Jul 25 '16 at 12:03

score 1 · Answer 2 · answered Jul 25 '16 at 11:54

1

You can't register a static listener, because you add the items dynamically. You can use on with document instead:

$(document).on("click", '.mycarousel', function(){
    alert('this is inner div with border color blue');
});

$(document).on('click', '.myimg', function() {
    alert('this is inner image');
});

answered Jul 25 '16 at 11:54

eisbehr

12,243
7
38
63

thanks so much for your explanation, this is what i was expecting, because item is added dynamically, i made i static item and i could get it, a really big thanks but already accepted an answer that was a bit faster than your – sam Jul 25 '16 at 12:09
please how to get say property or style of a dynamically generated element since they are not in the DOM yet when the page load $left = $(".mycarousel:last").position.left; this is not an event so how do i get this thanks bros – sam Jul 25 '16 at 12:23

Slan · Answer 3 · 2016-07-25T12:01:40.203

0

Try this.

$(document).on('click', '.mycarousel' , function() {
    //code here ....
});

edited Jul 25 '16 at 12:01

answered Jul 25 '16 at 11:56

Slan

545
2
6
18

`delegate` is been replaced with `on` since jQuery 1.7, you should not use it anymore – eisbehr Jul 25 '16 at 11:57
ok. @eisbehr Thanks for making me correct. – Slan Jul 25 '16 at 11:58

can't get click event of div element in jquery

3 Answers3