0

我试图解决这个问题一整天，但我找不到让它工作的方法。

我有一个类似于工具提示的行为。它在鼠标悬停时显示在一些下方，并且包含 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 之外的按钮，则不存在问题。

有人知道出了什么问题吗？

最好的问候， IceWave

4

7 回答 7

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/

于 2012-05-02T05:38:45.603 回答
0 
<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');
});

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

于 2012-05-02T05:29:07.810 回答
0

尝试这个：

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

于 2012-05-02T05:29:43.297 回答
0

它的标签谁确实提高了点击次数。只需添加以下内容：

$(".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');
});
于 2012-05-02T05:33:50.453 回答
0

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

用jquery是不是很简单

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

$("#remove").click(function() {
  alert('This is remove button');
});
于 2012-05-02T05:24:25.230 回答
0

将 <div> 替换为 <span>，这在 <label> 内是允许的（<div> 是不允许的）。

于 2012-05-02T05:24:56.217 回答
0

您将整个工具提示包裹在label其中，这会产生问题。试试你这样的工具提示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 -->

并且不要使用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');
});

演示

于 2012-05-02T05:54:15.420 回答