0

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

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

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

我的问题是为什么事件会以“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>
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. 您正在为单击事件收听错误的元素。你听#shopping_list，这是一个空的 div，因此在有一些内容之前不能点击。我猜你希望标题是可点击的，所以你需要给它一个 id 或 class 并将点击监听器附加到那个。如果不是这种情况，则为该元素提供一些内容，以便可以单击它。

  2. this可以根据上下文有所不同。在您的情况下，this指的是整个文档。这是因为点击任何地方就足以触发事件。

  3. 您正在将 ' 添加到与<tr>' 相同的级别<td>。实际上，单元格应该嵌套在行中。

  4. 您的<body>标签应该在文档的末尾，在<div>.

为了向您展示如何执行此操作的示例，这里有一个演示：

演示

于 2013-03-17T20:55:49.143 回答
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 回答
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 回答