.click() 功能在单击按钮时不起作用

Question

我目前正在 CS50 中完成我的最后一个项目，但我遇到了第一次真正的挣扎，似乎无法解决问题。

我有一个网页，用户可以在其中查看他或她的所有目标以及完成这些目标的步骤。除了这些步骤之外，还需要以“0/7”格式完成该步骤所需的一些成功。我希望右边有两个按钮，一个用于完成步骤，一个用于未完成步骤。单击完成的步骤时，它应该在 JS 中运行一个函数以将数字加一，如果单击失败的按钮，它应该减少。但是，当我单击任何一个按钮时，什么都没有发生。一些数据我使用了flask和sqlite。

这是我的完整 HTML。它是我的 layout.html 的扩展。 代码示例中的缩进可能有点偏离。

{% extends "layout.html" %}

{% block title %}
Goals
{% endblock %}

{% block main %}
<div class="wrap">
  <h1>Welcome to Your Goals Board</h1>
  <br>
  {% if numOfGoals == 0 %}
    <h2> No Current Goals</h2>
    <br>
    <p> Add a goal <a href="/addGoal">HERE</a></p>
  {% else %}
        {% for goal in goals %}
            <h2>Goal</h2>
            <br>
            <h5 class="floatLeft"><strong>Goal:</strong> {{ goal.goalName }}</h5>

            <!-- Vision link table with deadline -->
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th scope="col" colspan="4">Link to Vision</th>
                  <th scope="col" class="stepSuccess">Deadline</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="4">{{ goal.visionLink }}</td>
                  <td colspan="1">{{ goal.deadline }}</td>
                </tr>
              </tbody>
            </table>
            <br>

            <h5 class="floatLeft"><strong>Steps</strong></h5>
            <!-- Steps table with subgoals -->
            {% if goal.step1 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 1</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step1 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions1 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step2 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 2</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step2 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions2 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step3 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 3</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step3 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions3 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step4 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 4</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step4 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions4 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step5 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 5</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step5 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions5 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step6 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 6</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step6 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions6 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step7 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 7</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step7 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions7 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step8 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 8</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step8 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions8 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step9 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 9</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step9 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions9 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step10 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 10</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step10 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions10 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            <h5 class="floatLeft"><strong>Subgoals:</strong> {{goal.subgoals}}</h5>
            <br>
            <br>
            <br>
            <button class="btn btn-outline-primary" id="goalComplete" type="button">Goal Completed!</button>
            <hr class="goalSeperator">
            <br>
      {% endfor %}
    {% endif %}
</div>
{% endblock %}

这是我的 JS

$(".stepDoneBtn").click(function() {

    var td = $(this).parent();
    var current = Number(td.find(".currentComple").text());
    var goal = Number(td.find(".goalComple").text());

    if (current < goal)
    {
        current++;
        td.find(".currentComple").text(current);
    }

    if (current == goal)
    {
        td.closest("tr").css("color", "#D3D3D3");
    }

});


$(".stepFailBtn").click(function() {

    var td = $(this).parent();
    var current = Number(td.find(".currentComple").text());
    var goal = Number(td.find(".goalComple").text());

    if (current < goal && current > 0)
    {
        current--;
        td.find(".currentComple").text(current);
    }

});

应该说我的 HTML 示例中的这个表是其中之一，因为我使用烧瓶和 for 循环从 sqlite db 中插入表和表行。所以有很多行，每行末尾都有这两个按钮。

希望有人能帮忙:)

有效！ 好像是js函数和按钮的绑定有问题，因为前端是后渲染的。事件委托有效。

交换

$(".stepDoneBtn").click(function() {...});

to 

$(document).on('click', ".stepDoneBtn", function() {...});

成功了！感谢所有提供帮助的人！

Answer 1

你有一堆小错误。你需要一步一步来，并使用 console.log() 来弄清楚发生了什么。第一个问题是你有一个类，并且你使用一个 id 选择器。您混合使用 DOM 方法和 jQuery 方法，使用字符串而不是变量。

这是你出错的cmets代码，你可以自己修复另一个按钮。

// $("#stepDoneBtn").click(function() { needs to be a class

$(".stepDoneBtn").click(function() {
  var td = $(this).parent();
  var current = Number(td.find(".currentComple").text());
  var goal = Number(td.find(".goalComple").text());

  if (current < goal) {
    current++;
    // td.find(".currentComple").innerHTML = "current"; <-- not the variable not how jQuery sets html
    td.find(".currentComple").text(current); 
  }

  if (current == goal) {
    td.closest("tr").css("color", "#D3D3D3");
  }

});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tbody>
    <tr>
      <th scope="row" colspan="1" class="stepNum">Step 1</th>
      <td colspan="4" class="stepDiscrib">{{ goal.step1 }}</td>
      <td colspan="1" class="stepSuccess">
        <span class="currentComple">0</span>/<span class="goalComple">4</span>
        <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fa fa-times"></i></button>
        <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fa fa-check"></i></button></td>
    </tr>
  </tbody>
</table>