Javascript .click（）函数不'；单击按钮时不工作

我目前正在做CS50的最后一个项目，但我遇到了第一次真正的困难，似乎无法解决这个问题

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

这是我的HTML的全部内容。它是my 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 %}

---

成功了！感谢所有帮助过我的人

你有很多小错误。您需要一步一个脚印地完成，并使用console.log（）找出发生了什么。第一个问题是您有一个类，并且您使用了一个id选择器。混合使用DOM方法和jQuery方法，使用字符串而不是变量

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

/$（“#stepDoneBtn”）。单击（函数（）{需要是一个类
$（“.stepDoneBtn”）。单击（函数（）{
var td=$（this.parent（）；
var current=Number（td.find（“.currentComple”）.text（）；
var goal=Number（td.find（“.goalComple”）.text（）；
如果（当前<目标）{
电流++；
//td.find（“.currentComple”）.innerHTML=“current”
.value
用于输入；您正在span.Try.text（）上使用它。您的单击处理程序启动得很好，现在需要修复的是它们中的代码，但仍然不起作用。您需要使用类“#stepDoneBtn”@j08691我写的代码完全像小提琴一样，我可以看到它工作得很好，但在我自己的程序中什么都没有发生。这可能与我在flask服务器上运行我的网页或者我的HTML在flask for loop，{%for loop%}中有关吗？我想我现在已经修复了我的代码，但由于某些原因，按钮仍然没有响应。这与我的HTML是flask（Jinja）for循环的一部分，{%for…%}和一个{%if语句%}有什么关系吗？如果渲染是在前端完成的，可能是在绑定后渲染的。所以你需要使用事件委派。
$（'.table'）。在（'click'，“.stepDoneBtn”，function（）{}）；
或将表交换为
$（文档）。在（…）
上，它现在可以工作了！非常感谢您的帮助和耐心，非常感谢！
$(".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);
    }

});

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

to 

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