Question

我正在尝试自学jQuery，目前正在玩点击事件。据我了解，基于id触发click事件的语法是

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

当我尝试这个时，点击事件不会触发。但是，当我更改“#IDname”以使用“this”对象时，点击事件DID会触发。我不认为我想基于'this'对象开火，我仍然在玩代码以让处理程序以我期望的方式触发（或者直到我发现我看到问题都错了）。 / p>

我的问题是为什么事件会以'this'而不是ID来触发。请参阅下面的示例代码：

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

Answer 1

看起来您的#shopping_list div没有高度，因此没有收到任何点击。

如果你修改#shopping_list div要么包含某些内容，要么通过css给它一些尺寸它是有效的。

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

这里添加了一些虚拟内容：http://jsfiddle.net/Zafw6/

Answer 2

有很多问题：

您正在收听点击事件的错误元素。您收听#shopping_list，这是一个空div，因此在有内容之前无法点击。我想你希望标题是可点击的，所以你需要给它一个id或类，并将click监听器附加到那个。如果不是这样，那么为该元素提供一些内容，以便可以点击它。
this可能会有所不同。在您的情况下， this指的是整个文档。这是因为点击任何地方都足以触发事件。
您要将<tr>添加到与<td>相同的级别。实际上，单元格应嵌套在行中。
您的<body>代码应位于文档末尾，位于<div>之后。

为了向您展示如何操作的示例，这是一个演示：

DEMO

Answer 3

这与您正在操作的上下文相关。当你在document.ready函数中调用$（this）时，这指的是dom的根所以相反当你调用$（“＃someme”）.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>");
})

Answer 4

尽可能使用链接。无需一次又一次地搜索节点它正在影响性能。见这些例子

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

jquery点击事件说明

4 个答案:

DEMO