无法在jquery [duplicate]中获取div元素的点击事件

This question already has an answer here:

这个问题已经有了答案:

Event binding on dynamically created elements? 21 answers
动态创建的元素上的事件绑定?21日答案

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

这个问题很奇怪,标题可能没有完全解释意义,这就是我的意思是,我有彼此的div嵌套列表,我可以得到的点击事件和其他事件外div但不能点击事件和其他事件内在div和它的内容。下面是我的代码

    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

在小提琴上的演示，请在小提琴上看到演示，并添加一些图片和div，现在试着获得带有边框颜色蓝色或图像的div的点击事件。

3 个解决方案

#1

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

使用$(文档)。在分配单击事件时，div元素还不在DOM中

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

#2

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

#3

Try this.

试试这个。

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

#1