CODEWITHSUNDEEP
jquerycssbuttonhtml
IceWave
IceWave

Reputation: 1

Issue with buttons in <div>, 2nd button acts like 1st one

I'm trying to figure this out for a whole day and I just can't find the way to make it work.

I have a which acts like tooltip. It shows under some on mouseover and it contains 2 buttons.

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 Style for tooltip:

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

The problem is, when I click on first button, it works fine and shows me "This is edit button" but when I click on second (Remove) button, it shows me 2 alerts. First is "This is remove button" and second one is "This is edit button" so basically, it clicks on first button too.

I have no problem in Opera browser but in every other (Chrome, IE, FF).

UPDATE: Problem doesn't exist if I use buttons outside of tooltip div.

Does anybody know what's wrong?

Best regards, IceWave

Upvotes: 0

Views: 222

Answers (7)

thecodeparadox
thecodeparadox

Reputation: 87073

you whole tooltip in wrap within label and this arise the problems. Try you tooltip html like this:

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

And dont use live(), use on() instead like below:

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

Upvotes: 0

Chinmaya003
Chinmaya003

Reputation: 476

Its lable who did raise click twise. Just add this:

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

Upvotes: 0

Ivan Drinchev
Ivan Drinchev

Reputation: 19581

The problem is in your label tag. The default <label> responds on a click, and if is used with a button/checkbox/radio, etc. it selects the element, so basically if you add another button to your <label> tag it will hit it as the first button e.g.

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

So you have to hide the first button and Label now will select the buttons that you wish.

Although THIS IS JUST A PATCH, don't use something like this in your HTML code (remove label if unnecessary and don't nest it with buttons)

See jsfiddle with the fix : http://jsfiddle.net/3LD4U/1/

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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

You should use the newest version of jQuery and do:

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

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

and replace document with the closest non dynamic parent.

Upvotes: 0

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

Try this:

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

By the way you HTML markup is wrong. You cannot place a div inside label.

Upvotes: 0

Rinzler
Rinzler

Reputation: 2116

you should use directly the id of buttons not by a common div of tp

isnt it simple with jquery 

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

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

Upvotes: 0

Mark Reed
Mark Reed

Reputation: 95252

Replace the <div> with a <span>, which is allowed inside a <label> (<div> isn't).

Upvotes: 0

Related Questions