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

时间:2012-05-02 05:16:40

标签: jquery css button html

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

我有一个像工具提示的行为。它显示在一些鼠标悬停下,它包含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

7 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

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

使用jquery

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

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

答案 2 :(得分:0)

替换&lt; div&gt;使用&lt; span&gt;,允许在&lt; label&gt;内(&lt; div&gt;不是)。

答案 3 :(得分: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');
});

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

答案 4 :(得分: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。

答案 5 :(得分: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');
});

答案 6 :(得分:0)

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