时间戳

首页 > 解决方案 > jQuery点击事件没有触发

javascript - jQuery点击事件没有触发

问题描述

下面是相关的 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}}

简而言之，上面根据每个用户的角色属性为每个用户制作了一个带有适当按钮的小框，但到目前为止唯一有效的按钮是存档按钮（其他两个尚不存在事件处理程序）但是，实际上删除按钮显示，只是单击它什么都不做。

标签： javascriptjqueryhtmlhandlebars.js

解决方案

你的括号是错误的。您在存档按钮单击处理程序中有删除按钮事件处理程序。因此，在您单击存档按钮之前不会添加删除处理程序（如果您多次单击存档，删除按钮将多次执行其代码）。

如果您正确缩进了代码，您会看到这一点（每个编程编辑器都可以为您自动执行此操作）。

它应该是：

$(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);
  });
});

推荐阅读