Question

我刚刚学会了用jquery做一些JavaScript，并且我试图做一个简单的登录/订阅表单，并带有一个按钮，该按钮可让您在“登录”和“登录”之间动态切换。 / p>

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

对不起，我英语不好，我正在努力提高自己：）

感谢您的帮助！

源代码：

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>

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

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

1 个答案: