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番目の（削除）ボタンをクリックすると2つのアラートが表示されることです。1つ目は「削除ボタン」、2つ目は「編集ボタン」なので、基本的には1つ目のボタンもクリックします。

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

したがって、最初のボタンを非表示にする必要があり、ラベルは希望するボタンを選択します。

これは単なるパッチですが、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

クリックをtwiseに上げたそのラベル。これを追加するだけです：

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

tp の共通の div ではなく、ボタンの ID を直接使用する必要があります

jqueryで簡単じゃない？

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

$("#remove").click(function() {
  alert('This is remove button');
});
于 2012-05-02T05:24:25.230 に答える
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 に答える
0

<div> を <span> に置き換えます。これは <label> 内で許可されています (<div> は許可されていません)。

于 2012-05-02T05:24:56.217 に答える
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 に答える