jqueryのdiv要素のclickイベントを取得できません

Question

この問題はとても奇妙で、タイトルは意味を完全に説明していないようですので、これは私がお互いにネストされたdivのリストを持っています。 clickイベントと外部Divの他のイベントを取得しますが、clickイベントや内部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 フィドルにデモを見ると、一部の画像とのdivが表示されます追加し、今それ

で境界線の色BLUEや画像をdiv要素のクリックイベントを取得してみてくださいあなたのクリックイベントを割り当てる

Answer 1

使用$(document).on原因は、DIV要素は、あなたが動的に項目を追加するので、あなたは、静的リスナーを登録することはできませんまだ

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

Answer 2

DOMではありません。代わりにdocumentとonを使用することができます。

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

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

Answer 3

はこれを試してみてください。

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