jQuery событие клика не срабатывает - PullRequest
Новая
       4

jQuery событие клика не срабатывает

0 голосов
/ 31 января 2020

Соответствующее 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}}

Короче говоря, вышеприведенное делает небольшую коробку с соответствующим кнопки для каждого пользователя, в зависимости от его атрибута роли, но единственной рабочей кнопкой на данный момент является кнопка архива (для двух других еще нет обработчиков событий). Однако кнопка удаления фактически отображается, просто нажатие на нее ничего не делает.

1 Ответ

0 голосов
/ 31 января 2020

Ваш брекет неправильный. У вас есть обработчик события кнопки удаления внутри обработчика нажатия кнопки архива. Таким образом, обработчик удаления не добавляется до тех пор, пока вы не нажмете кнопку архива (и если вы нажмете архив несколько раз, кнопки удаления выполнят свой код несколько раз).

Вы увидите это, если правильно сделал отступ в вашем коде (у каждого редактора программ есть опции, чтобы автоматизировать это для вас).

Это должно быть: 

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