Q:

Trying to change the data-zoom-image attribute of an dynamically created 

I am trying to change the data-zoom-image attribute of a dynamically created  tag but its unsuccesful  here is the code bellow:
here is where i create(it's an onclick event) the  tag: 
$("#ImageBingingDiv").html('<img id="toZoom" style=" box-shadow: 3px 3px 1px #ccc;" src="'+id+'"   data-zoom-image="'+ id+'" width="'+widthD+'px" height="'+heightD+'" margin="10px"alt=""/>');
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');
$("#toZoom").on('click', function(){
       $("#toZoom").elevateZoom({

        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500
});  
});

and here is on the other click where it should change:
$("#toZoom").fadeOut('fast', function () {
      $("#toZoom").attr('src', id);
      $("#toZoom").attr('data-zoom-image', id); 
      $("#toZoom").fadeIn('fast');
 });

So everything changes as it should except the zoom is keeping the old data-zoom-image value.  I am using elevatezoom plugin. 

A:

$("#ImageBingingDiv").html('<img id="toZoom"  style=" display:none;box-shadow:3px 7px 7px rgba(0, 0, 0,0.5);'+curs+' '+marginD+'"  src="./somepath/'+id+'. '+$("#"+id).data("typeim")+'"   data-zoom-image="./somepath/'+ id+'. '+filetype+'" width="'+widthD+'" height="'+heightD+'" alt=""/>'+infoDiv);
$("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');

if($("#"+id).data("hwtype")=="h"){
$("#toZoom").on('click', function(){
    if($(".zoomContainer").length == 0 && $( window ).height()<1010) {
     if($("#"+id).data("hwtype")=="w"){
             $("#toZoom").elevateZoom({
              zoomType: "lens",
              lensShape : "rechtangle",
              lensSize    : 200 

            });         
         }
     else{
      $("#toZoom").elevateZoom({
                zoomWindowFadeIn: 500,
                zoomWindowFadeOut: 500,
                lensFadeIn: 500,
                lensFadeOut: 500
            });         
     }
     $("#toZoom").off('click');
    }
}); 
setTimeout(function (){
 $("#toZoom").css("cursor", "url(./images/css/zoom1.png),auto"); 
     },100); 
}   

$("#toZoom").fadeIn(300);
});

