0

私はjQueryが初めてです。一意の ID を持つ動的に生成された行があります。各行に jQuery 関数を適用する必要があります。

jQuery 関数は、クリックするのを待つのではなく、ページが読み込まれた直後に開始します。

<script type="text/javascript">
$(function popup() {
  $(this).hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});
</script>

「tr」行をクリックしたときに jQuery popup() 関数がその機能を実行し、その特定の行にのみ影響するようにします。

<tr id="abc" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="def" onclick="popup()">
  <td>blah</td>
</tr>
<tr id="ghi" onclick="popup()">
  <td>blah</td>
</tr>
4

4 に答える 4

1

セレクターを使用して、関数が適用される要素を指定し、その選択を適切な jQuery メソッドに渡します。

$('tr').click(
    function(){
        popup();
    });

上記の関数は、誰かが要素 (またはクリックがバブリングするため、その子) をpopup()クリックした場合にのみ呼び出されます。tr

最初の DOMReady イベントに続いて要素を動的に追加するon()場合は、 を使用することもできます。tr

$('tbody').on('click','tr',function(){
    popup();
});

on()イベントは、動的に追加された要素に最も近い要素にバインドされ、メソッドにはイベント タイプ ( ) と、オプションでセレクター ( ) が渡され、どのclick要素trがイベント内で見つかった関数をトリガーするかを決定します。方法。

ただし、ポップアップに使用している要素によっては、 をドキュメント内の1 つの一意のid要素にしか使用できないことに注意してください。

参照:

于 2012-06-14T20:10:50.050 に答える
0

クラスを「 popup」可能な要素に追加します。

<tr id="abc" class="pop-up-class" >
  <td>blah</td>
</tr>
<tr id="def" class="pop-up-class" >
  <td>blah</td>
</tr>
<tr id="ghi" class="pop-up-class" >
  <td>blah</td>
</tr>

次に、スクリプトで:

$(function() {
  $('.pop-up-class').hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
});
于 2012-06-14T20:12:16.753 に答える
0

clickその関数を呼び出すだけでなく、イベントを TR 行にバインドするつもりだったと思います。関数を DOM 要素にバインドする正しい方法は、コールバック関数をそれらにバインドすることです。これにより、コールバック関数を一連の要素に定義し、イベントをトリガーした要素のコンテキストでコードを実行できます。イベントがトリガーされると、バインドされたコールバックが実行され、thisDOM 要素になります。

また、jQuery コードは、DOM の準備ができたときにトリガーされるイベントでラップする必要があります。その時点で、DOM の読み込みが完了し、イベントをバインドする要素が存在することを確認できます。

最後に、コールバックを次のように書き直すことができます。

<script type="text/javascript">
$(document).ready(function(){
    $("tr").on("click", function() {
    $(this).hover(function() {
        $("div#pop-up").show();
      }, function() {
        $("div#pop-up").hide();
      });
    });
});
</script>

詳細な説明と例: http://api.jquery.com/hover/

次のことも知っておく必要があります。

  • ホバーされている要素に応じてアクションを実行する必要がある場合は、hoverイベント内にコンテキスト要素もあります。this
  • jQuery.on()は、イベントがまだ DOM にない場合でも、セレクターに一致する要素にイベントをバインドします。これにより、要素を動的に挿入し、イベントをバインドしたままにすることができます。
于 2012-06-14T20:13:28.720 に答える
0

のように Onclick を呼び出すthis

<tr id="abc" onclick="popup(this)">
  <td>blah</td>
</tr>

次に、に変更popupします

function popup(elem) {
  $(elem).hover(function() {
    $('div#pop-up').show();
  }, function() {
    $('div#pop-up').hide();
  });
}

あなたの構文

$(function popup() {

正しくない

$(function(){
     function popup() {
     ....
     ....
于 2012-06-14T20:09:11.387 に答える