主页 / 问题 / 760066
Accepted
kittycat_13
Asked:2020-12-18 23:04:03 +0000 UTC2020-12-18 23:04:03 +0000 UTC

.click() 事件同时以两种不同的方法触发

  • 772

你好！我正在用 js 为我的 php 中的 api 编写一个客户端。我马上预约，我刚开始用js，可能有我没有注意到的错误。

重点是这个。我有一个客户端，它将来自 api 的文章列表输出为表格。每个表条目都可以更新和删除。也可以将您的文章添加到表格中。

我使用相同的表单来创建和编辑文章。

表单代码（添加编辑文章的表单id = addArcicle）：

    <!DOCTYPE html>
  <html>
    <head>
      <title>JS-client</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
    <body>
        <button type="button" id="newArticle" class="btn btn-outline-secondary" onclick="articles.addAction()">Add new article</button>
      </nav>
        <form id="addArcticle" class="col-lg-2">
            <fieldset>
            <legend>Add new article</legend>
            <div class="form-group">
              <label for="title">Title of article</label>
              <input type="text" class="form-control" id="title">
            </div>
            <div class="form-group">
             <label for="exampleTextarea">Content</label>
                <textarea class="form-control" id="content" rows="3"></textarea>
              </div>
            <div class="form-group">
              <label for="author">Author</label>
              <input type="text" class="form-control" id="author">
            </div>
            <button type="button" class="btn btn-primary" id="add">Add</button>
            </fieldset>
        </form>
        <script src="js/jquery.js"></script>
        <script src="js/client.js"></script>
        <script src="js/helpers.js"></script>
    </body>
</html>

如果任务是向表中添加新文章，则单击“添加新文章”按钮并出现此表单。在单击按钮之前，表单被 jQuery hide() 方法隐藏。

添加新记录进展顺利。但是，如果我尝试在不重新加载页面的情况下立即按下编辑按钮，那么，除了该条目发生更改之外，还会创建相同条目的新条目。那些。click() 事件以两种不同的方法触发。

以下是我使用 js 方法处理给定表单的方法：

function ArticleController() {
    this.posts = [];

    this.indexAction = function() {
        articles.getAllArticles();
    };

    this.addAction = function() {
        $('#articleTable').hide();
        $('#addArcticle').show();

        $('#add').click(function(){
            title = $('#title').val();
            content = $('#content').val();
            author = $('#author').val();
            articles.addArticle(title, content, author);
        });
    };

    this.deleteAction = function(id) {
        this.deleteArticle(id);
    };

    this.editAction = function(id) {
        var article = document.getElementById(''+id);

        $('#title').val("" + article.cells[1].innerHTML);
        $('#content').val("" + article.cells[2].innerHTML);
        $('#author').val("" + article.cells[3].innerHTML);

        $('#add').click(function(){
            title = $('#title').val();
            content = $('#content').val();
            author = $('#author').val();
            articles.editArticle(id, title, content, author);
        });
    };
}

请告诉我，可能出了什么问题。

这是客户端本身的视图，用于定位哪个按钮在哪里： 在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    错误是您将两个不同的处理程序（更多，但在下面更多）附加到带有id="add". 处理程序应该是一个，并且在其中 - 用于创建和编辑的行为逻辑。在调用处理程序时，应该知道当前正在执行哪个操作。

    或者使用不同的处理程序创建两个不同的按钮 - 用于添加和编辑，并根据情况显示/隐藏它们。

    现在关于“更多处理程序”。

    每次调用 和 时ArticleController.addAction，ArticleController.editAction代码都会将新的处理程序添加到$('#add').click(. 当按下按钮时，这些累积的处理程序将全部触发。

    我怀疑该对象ArticleController是每页一个。将单击处理程序挂在按钮上一次 - 在构造函数中。

    • 2

相关问题