0

私はjQueryを独学しようとしていますが、現在クリックイベントをいじっています。私が理解しているように、idに基づいてクリックイベントを発生させるための構文は

$("#IDname").click(function(){ //stuff goes here})

これを試してみると、クリックイベントは発生しません。ただし、「#IDname」を「this」オブジェクトを使用するように変更すると、クリック イベント DID が発生します。私は「この」オブジェクトに基づいて発火したいとは思わず、ハンドラーを期待どおりに発火させるためのコードをまだいじっています（または、問題をすべて間違って見ていることがわかるまで）。

私の質問は、ID ではなく「this」でイベントが発生した理由です。以下のサンプルコードを参照してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
      .heading {
          font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
      }
    </style>
  </head>

  <body>
    <script src="jquery.js"></script>
    <script>
    $( document ).ready(function() {
        <!-- Does not fire the click event -->
        $( "#shopping_list" ).click(function(event) {
            $("#shopping_list").append("<tr>");
            $("#shopping_list").append("<td>Doe</td>");
            $("#shopping_list").append("<td>Re</td>");
            $("#shopping_list").append("<td>Mi</td>");
            $("#shopping_list").append("</tr>");
        })

        <!-- Works as expected...this adds a table row when the 'Shopping List' text is clicked -->
        $( this ).click(function(event) {
            $("#shopping_list").append("<tr>");
            $("#shopping_list").append("<td>1</td>");
            $("#shopping_list").append("<td>2</td>");
            $("#shopping_list").append("<td>3</td>");
            $("#shopping_list").append("</tr>");
        })
    });

    </script>
  </body>

  <div class="heading"><h2>Shopping List</h2>
      <div class="shopping_list">
        <table>
            <tbody>
                <form>
                    <div id="shopping_list"></div>
                </form>
            </tbody>
        </table>
      </div>
  </div>
</html>
4

4 に答える 4

4

#shopping_list div に高さがないようです。そのため、クリックが発生していません。

#shopping_list div を変更して何かを含めるか、css を介していくつかの寸法を指定すると、機能します。 

 <form>
   <div id="shopping_list">Content</div>
 </form>

これは、いくつかのダミーコンテンツが追加されたフィドルです: http://jsfiddle.net/Zafw6/

于 2013-03-17T20:52:33.563 に答える
1

複数の問題があります。

  1. クリック イベントの間違った要素をリッスンしています。これは空のdiv#shopping_listであるため、コンテンツが作成されるまでクリックできません。見出しをクリック可能にしたいので、IDまたはクラスを指定して、クリックリスナーをそれにアタッチする必要があります。そうでない場合は、その要素にコンテンツを提供して、クリックできるようにします。

  2. this文脈によって異なる場合があります。あなたの場合、thisドキュメント全体を参照します。これは、イベントをトリガーするには、どこかをクリックするだけで十分だからです。

  3. <tr>と同じレベルで を追加してい<td>ます。実際、セルは行にネストする必要があります。

  4. タグ<body>は、ドキュメントの末尾の<div>.

それを行う方法の例を示すために、ここにデモがあります：

デモ

于 2013-03-17T20:55:49.143 に答える
0

また、可能な限りチェーンを使用してください。パフォーマンスに影響を与えるノードを何度も検索する必要はありません。これらの例を参照してください

$(document).ready(function () {
    <!-- Does not fire the click event -->
    $("#shopping_list").click(function (event) {
        $(this).append("<tr>")
            .append("<td>Doe</td>")
            .append("<td>Re</td>")
            .append("<td>Mi</td>")
            .append("</tr>");
    })

    <!-- Or you can do it like that: -->
    $(this).click(function (event) {
        $("#shopping_list")
          .append("<tr><td>1</td><td>2</td><td>2</td><td>2</td><td>3</td></tr>");
    })
});
于 2013-03-17T20:57:11.137 に答える
0

これは、操作しているコンテキストに関連しています。 document.ready 関数から $(this) を呼び出すと、これは dom のルートを参照するため、代わりに $( "#someid" .click を呼び出すときに ' を使用します。 this' そのコールバック内では、コールバックが作用している要素を参照しています...

これを試して：

$( "#someid" ).click(function(e) {
   $(this).append("<tr>");
   $(this).append("<td>Doe</td>");
   $(this).append("<td>Re</td>");
   $(this).append("<td>Mi</td>");
   $(this).append("</tr>");
})
于 2013-03-17T20:51:18.867 に答える