Question

我正在从jQuery课程中复制一些示例代码，并偶然发现了一个关于从事件对象中提取元素的部分。

我理解evt是指被点击的元素。我的书说evt.target将找到哪个元素在其上调用了函数。当我在控制台中输入evt.target时，我得到了ReferenceError: evt is not defined。如何找到用户点击的元素？

jQuery代码：

$('#btnAddTask').click(function(evt) {  //user clicks 'Add Task' button
evt.preventDefault();
$('#taskCreation').removeClass('not');  //removes the 'not' class, which hides the input fields
});

完整示例（HTML，CSS，jQuery）：

@CHARSET "UTF-8";
body, h1, h2, h3, h4, h5, h6, p, ul, dl, ol, form, fieldset, input, label, table, tbody, tfoot, th, tr, td, textarea, select {
    font-family: "helvetica neue", helvetica, "lucinda sans unicode", "sans serif";
    font-weight: normal;
    color: #333;
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 12px;
}
header {
    width: 100%;
    height: 80px;
    background: #d1e0e1;
    color: #333;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 80px;
}
footer {
    width: 100%;
    height: 60px;
    background: #d1e0e1;
    font-size: 12px;
    text-align: center;
    line-height: 80px;
    margin-top: 30px;
}
table, th, td {
    border: 1px solid #888;
}
section {
    margin: 20px 0 0 20px;
}
table {
    width: 90%;
    border-collapse: collapse;
}
thead {
    line-height: 30px;
}
thead th {
    background: #53777a;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
td {
    font-size: 11px;
    line-height: 25px;
    padding-left: 10px;
}
.even {
    background-color: #f8f8f8;
}
nav {
    margin: 15px 0 10px 0;
}
nav a {
    background: #53777a;
    color: #fff;
    width: 80px;
    text-decoration: none;
    border: 1px solid #5b5b5b;
    font-size: 13px;
    text-align: center;
    padding: 5px 10px;
}
label {
    display: block;
    padding: 8px 0 8px 0;
    color: #333;
}
input {
    border-radius: 3px;
    height: 24px;
    border: 1px solid #AAA;
    padding: 0 7px;
}
input.large {
    width: 400px;
}
select {
    border: 1px solid #AAA;
    overflow: hidden;
    margin-right: 15px;
    width: 200px;
}
.required {
    color: red;
}
.not {
    display: none;
}
.rowHighlight {
    font-weight: bold;
}
label.error {
    color: red;
    font-weight: bold;
}
.overdue {
    background: #F7DCE5;
}
.warning {
    background: #F7F7DC;
}
.taskCompleted {
    text-decoration: line-through;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Task list</title>
  <link rel="stylesheet" type="text/css" href="styles/tasks.css" media="screen" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
  <header>
    <span>Task list</span>
  </header>
  <main>
    <section id="taskCreation" class="not">
      <form>
        <div>
          <label>Task</label>
          <input type="text" required="required" name="task" class="large" placeholder="Breakfast at Tiffanys" />
        </div>
        <div>
          <label>Required by</label>
          <input type="date" required="required" name="requiredBy" />
        </div>
        <div>
          <label>Category</label>
          <select name="category">
            <option value="Personal">Personal</option>
            <option value="Work">Work</option>
          </select>
        </div>
        <nav>
          <a href="#">Save task</a>  <a href="#">Clear task</a>
        </nav>
      </form>
    </section>
    <section>
      <table id="tblTasks">
        <colgroup>
          <col width="50%">
            <col width="25%">
              <col width="25%">
        </colgroup>
        <thead>
          <tr>
            <th>Name</th>
            <th>Due</th>
            <th>Category</th>
          </tr>
        </thead>
        <tbody>
          <tr data-priority="high">
            <td data-name-field="true">Return library books</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Personal</td>
          </tr>
          <tr data-priority="medium">
            <td data-name-field="true">Perform project demo to stakeholders</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Work</td>
          </tr>
          <tr data-priority="low">
            <td data-name-field="true">Meet friends for dinner</td>
            <td>
              <time datetime="2013-10-14">2013-10-14</time>
            </td>
            <td>Personal</td>
          </tr>
        </tbody>
      </table>
      <nav>
        <a href="#" id="btnAddTask">Add task</a>
      </nav>
    </section>
  </main>
  <footer>You have 3 tasks</footer>
</body>
<script>
  $('[required="required"]').prev('label').append('<span>*</span>').children('span').addClass('required');
  $('tbody tr:even').addClass('even');
  $('#btnAddTask').click(function(evt) {
    evt.preventDefault();
    $('#taskCreation').removeClass('not');
  });
</script>

</html>

Answer 1

试试这个：

                $('#btnAddTask').click(function(evt) { 
                        $('#taskCreation').removeClass('not'); 
                        evt.preventDefault();
                });

这适用于我的系统：

                $('#btnAddTask').on('click', function() {
                     $('#taskCreation').removeClass('not'); 
                });

如何从事件对象

1 个答案: