javascript - 为什么 JQuery 点击事件只能运行一次？

Question

我刚刚学会了用 jquery 做一些 javascript，我正在尝试做一个简单的登录/订阅表单，其中有一个按钮可以让您动态地在“登录”和“登录”之间进行更改。

但是当我单击更改表单的按钮时，它们每个只能运行一次。我可以像“登录”->“登录”->“登录”页面一样执行操作，但此后按钮不起作用。

抱歉我的英语不好，但我正在努力提高自己:)

感谢您的帮助!

源代码:

function buildLogin() {
    $(".allowedOnConnect").remove();

    let titre = $("<h2>Dota AZZA, two players, one challenge.</h2>")
        .appendTo("#content");

    let form = $("<div id='form'></div>")
        .appendTo('#content');

    let incriptionButton = $("<button type='button'>No account ? Click here !</button>")
        .click(function (){
            $("#form").empty();
            inscription.appendTo('#form');
        });

    let connexionButton = $("<button type='button'>You already have an account ? Click here !</button>")
        .click(function (){
            $("#form").empty();
            connexion.appendTo('#form');
        });

    let connexion = $("<form id='formLogin' method='POST' action=''></form>")
        .append("<input id='id' type='text' name='id' placeholder='Identifiant'/></br>")
        .append("<input id='pwd' type='password' name='pwd' placeholder='Mot de passe'/></br>")
        .append("<input type='submit' value='Connexion'/>")
        .append(incriptionButton)
        .submit(function () {
            $.ajax({
                url: "/php/login.php",
                type: 'POST',
                dataType: 'json',
                data: $(this).serialize()
            }).done(function (data) {
                if (data['id_user']) {
                    window.location.reload(true);
                }
                if (!data['is_filled']) {
                    $("#errorNotFilled").remove();
                    $("#formLogin").append("<p id='errorNotFilled'>Please fill the form</p>");
                }
            });
            return false;
        });

    let inscription = $("<form id='formSignIn' method='POST' action=''></form>")
        .append("<input id='id' type='text' name='id' placeholder='Identifiant'/></br>")
        .append("<input id='mail' type='text' name='mail' placeholder='Mail'/></br>")
        .append("<input id='pwd' type='password' name='pwd' placeholder='Mot de passe'/></br>")
        .append("<input id='pwdConfirm' type='password' name='pwd' placeholder='Confirmer le mot de passe'/></br>")
        .append("<input type='submit' value='Connexion'/>")
        .append(connexionButton)
        .submit(function () {
            $.ajax({
                url: "/php/signin.php",
                type: 'POST',
                dataType: 'json',
                data: $(this).serialize()
            }).done(function (data) {
                if (data['id_user']) {
                    window.location.reload(true);
                }
                if (!data['is_filled']) {
                    $("#errorNotFilled").remove();
                    $("#formLogin").append("<p id='errorNotFilled'>Please fill this form</p>");
                }
            });
            return false;
        });


    connexion.appendTo('#form');

}

Answer 1

您的问题是，当从 DOM 中删除元素时(例如，在您的情况下使用 .empty() 或 .remove())，所有事件处理程序都会也从元素中删除。因此，您的点击处理程序将不再存在。我建议不要在变量中创建元素，而是将它们的创建包装在函数中，然后您可以重用它们。

    function buildLogin() {
      $(".allowedOnConnect").remove();
      $("<h2>Deux joueurs, un défi.</h2>")
        .appendTo("#content");

      $("<div id='form'></div>")
        .appendTo('#content');

      let incriptionButton = function() {
        return $("<button type='button'>Pas de compte ? Cliquez ici !</button>")
          .click(function () {
            $("#form").empty();
            inscription().appendTo('#form');
          });
	  }

      let connexionButton = function() {
        return $("<button type='button'>Déja un compte ? Cliquez ici !</button>")
          .click(function () {
            $("#form").empty();
            connexion().appendTo('#form');
          });
	    }

      let connexion = function () {
        return $("<form id='formLogin' method='POST' action=''></form>")
          .append("<input id='id' type='text' name='id' placeholder='Identifiant'/></br>")
          .append("<input id='pwd' type='password' name='pwd' placeholder='Mot de passe'/></br>")
          .append("<input type='submit' value='Connexion'/>")
          .append(incriptionButton()) // <-- function call here
          .submit(function () {
            $.ajax({
                url: "/php/login.php",
                type: 'POST',
                dataType: 'json',
                data: $(this).serialize()
            }).done(function (data) {
                if (data['connected']) {
                    window.location.reload(true);
                }
                if (!data['is_filled']) {
                    $("#errorNotFilled").remove();
                    $("#formLogin").append("<p id='errorNotFilled'>Merci de remplir le formulaire</p>");
                }
            });
            return false;
        });
      };

    let inscription = function () {
      return $("<form id='formSignIn' method='POST' action=''></form>")
        .append("<input id='id' type='text' name='id' placeholder='Identifiant'/></br>")
        .append("<input id='mail' type='text' name='mail' placeholder='Mail'/></br>")
        .append("<input id='pwd' type='password' name='pwd' placeholder='Mot de passe'/></br>")
        .append("<input id='pwdConfirm' type='password' name='pwd' placeholder='Confirmer le mot de passe'/></br>")
        .append("<input type='submit' value='Connexion'/>")
        .append(connexionButton()) // <-- function call here
        .submit(function () {
            $.ajax({
                url: "/php/signin.php",
                type: 'POST',
                dataType: 'json',
                data: $(this).serialize()
            }).done(function (data) {
                if (data['connected']) {
                    window.location.reload(true);
                }
                if (!data['is_filled']) {
                    $("#errorNotFilled").remove();
                    $("#formLogin").append("<p id='errorNotFilled'>Merci de remplir le formulaire</p>");
                }
            });
            return false;
        });
      };
      
	  connexion().appendTo('#form');
    }
    
    buildLogin();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

这样，您将始终获得带有附加事件处理程序的元素的新实例。