How do I change data-magnify-src attribute of HTML element with jquery?

Question

I've tried

$(elem).prop('data-magnify-src', 'change')

$(elem).data('magnify-src', 'change')

This is my snippet. I hope I am not doing something dumb. I really thought it would work.

  $().ready(function () { $('.img-miniatura').click(function(e){ $('#bigImg').prop('data-magnify-src', 'new' ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img data-magnify-src="old" src="https://i.stack.imgur.com/uImwY.jpg?s=48&g=1" id="bigImg"/> </div> <div> <div>click the image below and change the data attribute of the image above</div> <img class='img-miniatura' src="https://i.stack.imgur.com/uImwY.jpg?s=48&g=1"/> </div> 

Answer 1

You need to use .attr , not .prop

For example:

$(function(){
  $('.img-miniatura').click(function(e){
    $('#bigImg').attr('data-magnify-src', 'new');
  });
});    

See here: https://jsfiddle.net/1hbkv75q/2/