Question

我试图弄清楚这一整天，我找不到让它运作的方法。

我有一个像工具提示的行为。它显示在一些鼠标悬停下，它包含2个按钮。

HTML CODE：

<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之外的按钮，则问题不存在。

有人知道什么是错的吗？

祝你好运， IceWave

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/

Answer 2

你应该直接使用按钮的id而不是tp的公共div

使用jquery

并不简单

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

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

Answer 3

替换＆lt; div＆gt;使用＆lt; span＆gt;，允许在＆lt; label＆gt;内（＆lt; div＆gt;不是）。

Answer 4

<label id="name1" class="label" style="width: 150px;">John Smith
    <span class="tp">
        <input type="button" class="button" id="edit1" value="Edit" />
        <input type="button" class="button" id="remove1" value="Remove" />
    </span>
</label>

您应该使用最新版本的jQuery并执行：

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

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

并用最接近的非动态父级替换文档。

Answer 5

试试这个：

$('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。

Answer 6

它的标签谁做了两次点击。只需添加：

$(".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');
});

Answer 7

你在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 -->

并且不要使用live()，请使用on()，如下所示：

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

DEMO

<div>中的按钮问题，第二个按钮就像第一个按钮一样</div>

7 个答案: