jquery - 中的按钮出现问题，第二个按钮的作用与第一个按钮相同

Question

我花了一整天的时间来解决这个问题，但我就是找不到让它发挥作用的方法。

我有一个类似于工具提示的功能。它在鼠标悬停时显示在一些下方，并且包含 2 个按钮。

HTML 代码:

<label id="name1" class="label" style="width: 150px;">John Smith
<div class="tp"> <!-- this is a tooltip I am talking about and it contains: -->
<button type="button" class="button" id="edit1">Edit</button>
<button type="button" class="button" id="remove1">Remove</button>
</div> <!-- end of tooltip -->
</label>

工具提示的 CSS 样式:

div.tp {
    position:absolute; 
    display: none;
    text-align: center;
}
label:hover div.tp {    position: absolute; 
    display: block; 
    z-index: 140; 
    max-width: 400px; 
    padding: 5px; 
    color: #dadada; 
    background: #000000; 
    border-radius: 4px;
}

Javascript:

$(".tp button[id^=edit]").live('click',function() { 
alert('This is edit button');
});

$(".tp button[id^=remove]").live('click',function() {
alert('This is remove button');
});

问题是，当我点击第一个按钮时，它工作正常并显示“这是编辑按钮”，但是当我点击第二个(删除)按钮时，它显示了 2 个警报。第一个是“这是删除按钮”，第二个是“这是编辑按钮”，所以基本上，它也会点击第一个按钮。

我在 Opera 浏览器中没有问题，但在其他所有浏览器(Chrome、IE、FF)中都没有问题。

更新:如果我在工具提示 div 之外使用按钮，则问题不存在。

有人知道这是怎么回事吗？

最好的问候，冰波

Answer 1

问题出在你的label标签。默认 <label>单击响应，如果与按钮/复选框/单选按钮等一起使用，它会选择元素，所以基本上如果您向 <label> 添加另一个按钮|标记它将作为第一个按钮点击它，例如

<label id="name1" class="label" style="width: 150px;">John Smith
   <div class="tp"> <!-- this is a tooltip I am talking about and it contains: -->
      <button type='button' class='btn' id='invisible'></button>
      <button type="button" class="button" id="edit1">Edit</button>
      <button type="button" class="button" id="remove1">Remove</button>
   </div> <!-- end of tooltip -->
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​​

所以你必须隐藏第一个按钮，Label 现在会选择你想要的按钮。

虽然这只是一个补丁，但不要在您的 HTML 代码中使用类似的东西(如果不需要，请删除标签，不要将其与按钮嵌套)

请参阅带有修复程序的 jsfiddle:http://jsfiddle.net/3LD4U/1/