Jquery 使用x-editable更改图像属性

我希望用户x-editable for bootstrap更改（例如）存储在链接数据字段中的twitter用户名。该链接不包含文本，仅包含图像：

<span class="socialicon">
  <a href="#" id="si_twitter" data-si-url="https://twitter.com/%USER%" data-si-user="dasaweb">
    <img src="https://pbs.twimg.com/profile_images/555402380594786304/3trx0uRj_200x200.jpeg" title="Twitter" />
  </a>
</span>

下面是我正在使用的javascript：

$('a[id^="si_"]').each(function(){$(this).editable({
    type: 'text',
    pk: 1,
    url: '#',
    placement: 'bottom',
    title: $(this).find('img').attr('title'),
    placeholder: 'Username',
    defaultValue: $(this).data('si-user'),
    tpl: '<span>' + $(this).data('si-url').split('%USER%')[0] + '</span><input type="text"></input><span>' + $(this).data('si-url').split('%USER%')[1] + '</span>'            
})});

$（'a[id^=“si_”]'）。每个（函数（）{$（this）。可编辑({
键入：“文本”，
主键:1,，
url:“#”，
位置：'底部'，
标题：$（this）.find（'img'）.attr（'title'），
占位符：“用户名”，
默认值：$（this）.data（'si-user'），
tpl:'+$（this）.data（''%USER%'）.split（'%USER%'））[0]+'+$（this.data（'si-url'）.split（'%USER%'））[1]+''
})});

我已经尝试了很多，但没有更多的想法。。。这里有一个简短的JSFIDLE来解决这个问题：如果有人知道如何编辑数据字段（或者图像的title属性，或者…），那就太好了