1

フィドル

私が今持っているものはほとんど良いですが、テーブルの行に沿ってマウスを動かすと、何らかの理由でボタンが削除されます。これは望ましくありません。テーブル全体をマウスアウトした場合に削除するボタンのみです。

HTML：3列12行+3列の古いテーブルのように見え<thead>ます。

JS：

$(document).ready(function(){
    $('#editData tr').hover(function(){
        $('button').remove();
        $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

CSS：

#editData {
  width: 500px;
  margin: auto;
  background: #dadce1;
  margin-bottom: 50px;
  box-shadow: 0 0 10px 1px #e1e1e1;
}
#editData tbody {
  border: 1px solid #b8b8b8;
  border-top: 0;
}
#editData thead {
  border: 1px solid #b8b8b8;
  border-bottom: 0;
  background: rgba(255,255,255,0.7);
  font-size: 20px;
}
#editData thead th {
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
#editData th:last-child, #editData tr td:last-child {
  width: 40px;
}
#editData tr {
  text-align: center;
  height: 30px;
}
#editData td {
  padding: 3px;
}
#editData tr:nth-child(even) {
  background: rgba(255,255,255,0.7);
}
#editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
}
4

5 に答える 5

5

DOMの準備ができたら、すべてのボタンを追加することをお勧めします。

$(function() {
  $('#editData tr td:last-child').append('<button class="editButton">Edit</button>');
});

次に、CSSを使用してボタンを表示/非表示にします。

.editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
  display: none;
}

#editData tr:hover .editButton {
  display: block;
}

また、ボタンがになっていることにも注意してください.editButton。

これが実際の動作です：http：//jsfiddle.net/23b99/15/

于 2013-02-15T18:27:41.813 に答える
2

2 番目のパラメーターを使用します.hover。mouseleaveこれにより、ハンドラーが行にアタッチされます ( tr)。

$('#editData tr').hover(function(){
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
}, function() {
    $('button').remove();
});

フィドル

基本的に、行のあなたmouseenterとmouseleaveハンドラーのバランスをとっただけです。

また、実際の問題を知りたい場合は、mouseoutvsmouseleave (ページの下部にあるデモ) についてお読みください。

問題は、mouseoutバブルアップするため、テーブルの子孫で起動するたびに、テーブル要素にバブルアップし、そのマウスアウト ハンドラーをトリガーすることです。

mouseoutドキュメントから：

このイベント タイプは、イベント バブリングが原因で多くの問題を引き起こす可能性があります。たとえば、この例では、マウス ポインターが Inner 要素の外に移動するmouseoutと、そこにイベントが送信され、その後 Outer まで細流します。mouseoutこれにより、不適切なタイミングでバインドされたハンドラーがトリガーされる可能性があります。.mouseleave()便利な代替手段については、 の説明を参照してください。

hoverは、アタッチmouseenterしてハンドラーを簡略化したものにすぎません。元の例の代わりにmouseleave明示的に使用することもできます。同様に機能します。mouseleavemouseout

$('#editData tr').mouseenter(function(){
    $('button').remove();
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
});
$('#editData').mouseleave(function(){
    $('button').remove();
});

フィドル

この 2 番目のコードは、あなたが求めたものです。mouseleaveテーブルのときにすべてのボタンmouseenterを削除しますmouseleave。どちらも同じ目に見える効果があります。

補足:単一の引数で呼び出された場合にハンドラーをとイベントの両方に不必要にアタッチするため、例のhoverbyを置き換えました。mouseenter.hovermouseentermouseleave

の.hover場合、mouseleavefor はtrボタンを削除して新しいボタンを作成し、マウスをテーブルの外に移動すると、作成したばかりのボタンを削除するテーブル要素までイベントがバブルアップします。または、マウスを別のボタンに移動すると、ハンドラーは、(mouseleave古い行とmouseenter新しいホバー ターゲット行の) 2 回も呼び出されます。もちろん、これらのハンドラーはマイクロ秒単位で実行され、ブラウザーが再描画をグループ化する可能性があるため、これは表示されません。このfiddleconsole.logの一部の s で実際に起こっていることがわかります。

これは、このユースケースでは大きな違いをもたらさない可能性があります (パフォーマンスを除く) が、他の多くのケースでは問題が発生する可能性があります。SO に関する多くの質問は.hover()、単一の引数で呼び出されmouseenterた場合、そうでないハンドラーのみがアタッチされると質問者が考えたためです。 .

ps。イベントのバブリング/ロジックの問題にこの回答を向けましたが、そのような単純なことでjQueryを悪用する必要はありません。@Daryl Ginn の答えは、実世界での使用に非常に適したソリューションです。=]

于 2013-02-15T18:22:51.183 に答える
0

私はあなたがこれを探していると思います: http://jsfiddle.net/23b99/13/

    $(document).ready(function () {
       $('#editData tr').hover(function () {
         $('button').remove();
         $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
       }, function () {
         $('button').remove();
       });
    });
于 2013-02-15T18:29:15.590 に答える
0

問題は、マウスが「td」を離れたときにマウスアウトが発生することですが、「tr」にあったため、ホバーは再び発生しませんでした。代わりに「td」でホバーを実行すると、マウスで水平方向に移動して列の境界を越えると、新しいホバーが開始されます。

この変更を試してください。tr -> td を追加し、.parent() を追加します

$(document).ready(function(){
    $('#editData td').hover(function(){
        $('button').remove();
        $(this).parent().children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

新しいフィドル

于 2013-02-15T18:24:19.337 に答える
0

に置き換えるだけhoverでmouseover機能します。

于 2013-02-15T18:22:11.927 に答える