title: Trying to change the data-zoom-image attribute of an dynamically created <img>
body: <p>I am trying to change the data-zoom-image attribute of a dynamically created  tag but its unsuccesful  here is the code bellow:</p>
  
  <p>here is where i create(it's an onclick event) the  tag: </p>
  
  <pre><code>$("#ImageBingingDiv").html('&lt;img id="toZoom" style=" box-shadow: 3px 3px 1px #ccc;" src="'+id+'"   data-zoom-image="'+ id+'" width="'+widthD+'px" height="'+heightD+'" margin="10px"alt=""/&gt;');
  $("#ImageBingingDiv").css('height',heightD+12+'px').css('vertical-align','center');
  $("#toZoom").on('click', function(){
         $("#toZoom").elevateZoom({
  
          zoomWindowFadeIn: 500,
          zoomWindowFadeOut: 500,
          lensFadeIn: 500,
          lensFadeOut: 500
  });  
  });
  </code></pre>
  
  <p>and here is on the other click where it should change:</p>
  
  <pre><code>$("#toZoom").fadeOut('fast', function () {
        $("#toZoom").attr('src', id);
        $("#toZoom").attr('data-zoom-image', id); 
        $("#toZoom").fadeIn('fast');
   });
  </code></pre>
  
  <p>So everything changes as it should except the zoom is keeping the old data-zoom-image value. I am using elevatezoom plugin.</p>