jQuery click事件未触发

Question

相关的Javascript如下，但是简而言之，归档按钮有效，而删除按钮无效。我已经尝试过将事件处理程序移到另一个文件，HTML使用脚本标签调用该文件以查看是否有区别，尽管我不确定是否以相同的方式损坏了它，但这似乎没有什么不同。此外，与每个事件处理程序关联的实际功能实际上是相同的，因此可以合理地排除该功能本身引起问题的可能性。为什么这两个按钮的效果不同？

const mongo = require('mongodb');
const config = require('../../javascripts/config.js'); //databaseAddress can now be found at config.databaseAddress()const mongo = require('mongodb');
const MongoClient = mongo.MongoClient;

const url = config.databaseAddress();

$(document).ready(function () {
    $('#navbar-userSearch').addClass('active');

    $('.archive-button').click(function () {
        var id = $(this).attr('id').split('-').slice(-1)[0] ;
        console.log('id', id);
        var username = $('#username-' + id).val();
        var csrf = $('#csrf').val();
        var action = $(this).attr('id').split('-')[0];
        console.log('username', username);

        $.ajax({
            url: '/'+action+'/'+username,
            type: 'PUT',
            data: {username: username, _csrf: csrf},
            success: function(data) {
                if (data.success) {
                    addMessage(data.message, true);
                    if (typeof data.redirect === 'string') {
                        setTimeout(function(){
                            window.location = data.redirect;
                        }, 2500);   
                    }
                } else {
                    addMessage(data.message, false);
                }
            },
            error: function(err) {
                addMessage('A network error might have occurred. Please try again.', false);
            }
        });
    });
    $('.delete-button').click(function() {
        console.log("stop pushing my buttons");
        var id = $(this).attr('id').split('-').slice(-1)[0] ;
        console.log('id', id);
        var username = $('#username-' + id).val();
        console.log('username', username);

        MongoClient.connect(url, { useNewUrlParser: true }, (err, client) => {

            const db = client.db("paxpopulidb");
            const id_query = {_id: id};
            const username_query = db.collection("users").find(id_query, {_id: 0, username: 1});
            const username = username_query.username;

            if (username) {
                if (username === "superadmin"){
                    console.log("You cannot delete the superadmin account.");

                } else {
                    db.collection("registrations").deleteOne(username_query);
                    db.collection("users").deleteOne(username_query);
                    db.collection("schedules").deleteOne(username_query);
                    console.log("Deleted " + username + " from database.");


    }}})
})});

HTML使用Handlebars进行模板制作，如下所示：

{{#each users}}
<div class='col-xs-12 col-ms-6 col-sm-4 col-md-3 col-lg-4 user-container tile-container' id='user-container-{{_id}}'>
  <div class='tile user-tile' name="user-{{_id}}" data-id='{{_id}}'>
    <div class='tile-icon' style='float: left'><img class='icon' src="/images/user.gif"></img></div>
    <div class='user-header tile-header'>
      <a data-toggle="modal" data-target='#user-modal-{{_id}}'>
        <h4 class='tile-title'>{{#if fullName}}{{fullName}}{{else}}{{firstName}} {{lastName}}{{/if}}</h4>
      </a>
      <p class='tile-subtitle'>{{role}}<h class='small-text'>{{#if archived}}(archived){{/if}}</h></p>

    </div>
    </div>
    <div id="user-modal-{{_id}}" class="user-item-modal modal fade" role="dialog">
    <div class="modal-messages"></div>
    <div class="modal-dialog modal-xs">
      <div class="modal-content">
        <div class="modal-header modal-title">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          {{#if fullName}}{{fullName}}{{else}}{{firstName}} {{lastName}}{{/if}}'s Profile
        </div>
        <div class="modal-body">
          {{> profileTable}}
        </div>
      </div>
    </div>
  </div>
    <div>
    <input id='username-{{_id}}' type="hidden" value="{{username}}"></input>
    <input id='requestToken-{{_id}}' type="hidden" value="{{requestToken}}"></input>
    <input id='csrf' type="hidden" name="_csrf" value="{{csrfToken}}">
    <center>
      {{#isRegularUser role}}
          <button id='registration-button-{{_id}}' class='btn btn-info btn-hg registration-button'>View/Edit Registration</button>
          <button id='schedule-button-{{_id}}' class='btn btn-info btn-hg schedule-button'>View/Edit Schedule</button>
      {{/isRegularUser}}
      {{#ifNot archived}}
        <button id='archive-button-{{_id}}' class='btn btn-warning btn-hg archive-button'>Deactivate</button>
      {{else}}
      {{/ifNot}}
      {{#isRegularUser role}}
          <button id='delete-button-{{_id}}' class='btn btn-danger btn-hg delete-button'>Delete User</button>
      {{/isRegularUser}}
    </center>
    </div>
</div>
{{/each}}

简而言之，根据用户的角色属性，上面的代码会在其中显示一个小方框，其中包含适合每个用户的按钮，但是到目前为止，唯一可用的按钮是archive-button（尚无其他两个事件处理程序），但是delete-按钮实际上会显示，只是单击它不会执行任何操作。

Answer 1

您的包围是错误的。您在存档按钮单击处理程序内部具有删除按钮事件处理程序。因此，只有在单击存档按钮后，才添加删除处理程序（如果您多次单击存档，则删除按钮将多次执行其代码）。

如果正确缩进代码，您会看到此信息（每个编程编辑器都有为您自动执行此操作的选项。）>

应该是：

$(document).ready(function() {
  $('#navbar-userSearch').addClass('active');

  $('.archive-button').click(function() {
    var id = $(this).attr('id').split('-').slice(-1)[0];
    console.log('id', id);
    var username = $('#username-' + id).val();
    var csrf = $('#csrf').val();
    var action = $(this).attr('id').split('-')[0];
    console.log('username', username);
  });

  $('.delete-button').click(function() {
    console.log("stop pushing my buttons");
    var id = $(this).attr('id').split('-').slice(-1)[0];
    console.log('id', id);
    var username = $('#username-' + id).val();
    console.log('username', username);
  });
});