Jquery 按钮在<；部门>；，第二个按钮的作用类似于第一个按钮

我一整天都在想这个问题，但我就是找不到办法让它发挥作用

我有一个类似于工具提示的工具。它显示在鼠标上方的一些按钮下，包含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>

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');
});

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

我在Opera浏览器中没有问题，但在其他浏览器（Chrome、IE、FF）中没有问题

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

有人知道怎么了吗

致以最良好的祝愿，

---

IceWave

您应该直接使用按钮的id，而不是通过tp的公共div

jquery不是很简单吗

$("#edit").click(function() {
  alert('This is edit button');
});

$("#remove").click(function() {
  alert('This is remove button');
});

将替换为a，这是a（不是）中允许的

并将文档替换为最近的非动态父文档。

尝试以下操作：

$('div.tp').find('button:nth-child(1)').live('click', function(){
   alert('Edit');
});
$('div.tp').find('button:nth-child(2)').live('click', function(){
   alert('Remove');
});

---

顺便说一下，HTML标记是错误的。您不能在标签内放置div。

它的标签是谁提升了单击两次的。 只需添加以下内容：

$(".label").live('click',function() {
    return false;
});

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

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

---

问题出在您的

标签中。默认的
会在单击时做出响应，如果与按钮/复选框/单选框等一起使用，它会选择元素，因此基本上，如果您在
标签中添加另一个按钮，它会作为第一个按钮点击它，例如

<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​

约翰·史密斯
编辑
去除
​​​​​​​​​​​​​​​​​​​​​​​​​​​

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

虽然这只是一个补丁，但不要在HTML代码中使用类似的东西（如果不必要，请删除标签，不要用按钮嵌套标签）

---

请参阅jsiddle及其修复程序：

您可以在

标签

中使用wrap包装整个工具提示，这就产生了问题。请尝试按以下方式使用工具提示html：

<label id="name1" class="label" style="width: 150px;">John Smith</label> <!--  label will end here-->
<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是一个内联元素，DIV是块级别。更改标记可能会起作用，如果不使用真正旧版本的jQuery，请将on（）用于委派事件。起初它是一个span，但结果是相同的。在那之后，我改为div，因为我认为这可能是个问题，我得到了相同的结果。我忘了提到这个问题可能与jQuery无关，因为如果没有jQuery，我的按钮也有：hover和：active style，当我按住第二个按钮时，我的第一个按钮也会：active style active。尝试将标记放置在标签标记之外，并将标签标记用于。。。。等等。。。。一个标签，您的所有问题都将被分类。谢谢，这是一个替代解决方案，但是，它是否正确有效，足以通过单击按钮来避免将来的错误？您是对的。这不是正确的解决方案。这里的主要问题是标签。如果你删除它，它会工作得很好。我在MAC OS X上使用Chrome 18.0.1025.168，但它不工作，你可以在屏幕截图中看到两个按钮都处于按下状态是的，我知道，但正如我所说的，起初我使用的是span，但后来我尝试使用div来查看是否会发生任何事情。现在把它还给span。这是正确的答案。我知道它与jQuery无关。我仍然担心这个修复是否比javascript“return false”更好；非常感谢！实际上，您可以像这样将

的

放置在标签标签标签中，这样可以防止默认按钮的执行
$(".label").live('click',function() {
    return false;
});

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

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

<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 id="name1" class="label" style="width: 150px;">John Smith</label> <!--  label will end here-->
<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 -->

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

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