Why are image attributes different when selecting element vs. inspecting?

Why are image attributes different when selecting element vs. inspecting?

The following function is called when my page loads to set the default src
and data attributes for an image element, and can also be called in the
following click event handler to change the elements src and data
attributes on the fly. The function sets the default attributes correctly
when the page loads, and also in the click handler (when I inspect the
image element the attributes have been changed) however when I select the
element the default attributes will not change no matter how many times I
run the click event. Does this have something to do with my callback?
function changepics(newbreed) {
var pic = "<?php echo $breedpic ?>";
var path = "../Mazi/images/";
var getpic = path+pic;
// set default
$('#breedimage').attr({
"src":getpic,
"data":pic
});
//change default
if(newbreed) {
$.post('myquery.php', {"newpic" : newbreed}, function(result) {
var newpic = result;
var newpic = path+newpic;
$('#breedimage').attr({
"src":newpic,
"data":newbreed
});
});
setfilter(currpage, newbreed);
}
}
$('#table2').on("click", ".breed", function() {
newbreed = $(this).text();
changepics(newbreed);
});