.click() function 在單擊按鈕時不起作用

Question

我目前正在 CS50 中做我的最后一個項目，但我遇到了第一次真正的掙扎，似乎無法解決問題。

我有一個網頁，用戶可以在其中看到他或她的所有目標以及完成這些目標的步驟。 除了這些步驟之外，還需要以“0/7”格式完成該步驟所需的成功次數。 我希望右邊有兩個按鈕，一個用於完成步驟，一個用於未完成步驟。 單擊完成的步驟后，它應該在 JS 中運行 function 以將數字增加一，如果單擊失敗的按鈕，它應該減少。 但是，當我單擊任何一個按鈕時，什么都沒有發生。 對於一些數據，我使用了 flask 和 sqlite。

這是我的 HTML 的全部內容。 這是我的布局的擴展。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 示例中的這個表是其中之一，因為我使用 flask 和一個 for 循環從 sqlite db 中插入表和表行。 所以有很多行，每行末尾都有這兩個按鈕。

希望有人可以幫忙:)

有用！ 好像是JS function和按鈕的綁定有問題，因為前端是后渲染的。 事件委托工作。

交換

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

to 

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

讓它工作！ 感謝所有幫助過的人！

Answer 1

你有一堆小錯誤。 你需要一步一步來，並使用 console.log() 來弄清楚發生了什么。 第一個問題是您有一個 class，並且您使用了一個 id 選擇器。 你混合使用 DOM 方法和 jQuery 方法，你使用字符串而不是變量。

這是您出錯的注釋代碼，您可以自己修復另一個按鈕。

 // $("#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>