jquery - 为什么我的动态添加（和按钮 A 替换）按钮 B 被 jQuery 点击？

Question

这是我的问题：

1. 用户点击按钮 A。
2. 这会触发一个 jQuery 动画隐藏按钮 A。
3. 完成此动画后，按钮 B将通过 jQuery 动画显示在完全相同的位置。
4. jQuery 就像按钮 B被点击一样。

这对我来说似乎很奇怪，并导致糟糕的用户体验。谁能帮我解决这个问题？这是 javascript 代码，虽然我认为这是 jQuery 的一般问题：

function showbuttonB(element){
   $(element).animate({ opacity: '0', marginRight: '-50px'}, 230, function(){
      $(element).append("<span class='buttonB'><a href='mailto:XXXXXXXX'><div class='icon'>ButtonB</div></a></span>");
      $(element).find('.buttonB').animate({
         display: 'toggle',
         marginRight: '0px'
      }, 230);
   });
}

$(".buttonA").live('touchend mouseup', function() {
  showbuttonB(this);
});

和 HTML：

<div class="buttonA">ButtonA</div>

Answer 1

它不像 bButton 被单击，问题是新按钮位于隐藏元素内。

检查这个工作小提琴

代码：

function showbuttonB(element) {
    $(element).animate({
        opacity: '0',
        marginRight: '-50px'
    }, 230, function() {
        $('#foo').append("<span class='buttonB'><a href='mailto:XXXXXXXX'><div class='icon'>ButtonB</div></a></span>");
        $('#foo').find('.buttonB').animate({
            display: 'toggle',
            marginRight: '0px'
        }, 230);
    });
}

$(".buttonA").live('touchend mouseup', function() {
    showbuttonB(this);
});​

HTML：

<div class="buttonA">ButtonA</div>
<span id="foo"> </span>

​</p>