在Jquery中分离后，如何将相同的函数添加回代码中

How do I add the same functions back into my code after detaching in Jquery?

本文关键字：函数 代码 添加 分离 Jquery      更新时间：2023-09-26

我正试图在第一次使用循环if语句后重新创建我的.click functions。我在页面上创建了一个按钮，询问用户是否要重新启动。当用户单击此按钮时，它确实会重新加载除我的.click函数、循环、jquery中的if语句之外的所有内容。

如何使我的按钮重新加载函数、循环和if语句？

我试着用remove（）。它也不起作用。正如你在我的代码中看到的那样，当用户点击Yes！然后，他们创建的div与代码a long分离（），其中包含页面上的大多数其他元素。之后我使用before（）&after（）来重新创建删除的问题，在它们下面加空格&他们的提交按钮。问题是提交按钮在再次创建后将不再起作用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>Razzakun's Etch A Sketch</title>
</head>
<body>
<center><h1>Welcome to Razzakun's Etch A Sketch</h1><center>
<center><div id="verticalSquaresQuestion">How many vertical squares of Etch A Sketch Space do you want?</div></center>
<br>
<center><input id="vsquareInput" type="text" value="" /></center>
<br>
<center><input id="vsubmit" type="button" value="Submit" /></center>
<br>
<center><div id="horizontalSquaresQuestion">How many horizontal squares of Etch A Sketch Space do you want?</div></center>
<br>
<center><input id="hsquareInput" type="text" value="" /></center>
<br>
<center><input id="hsubmit" type="button" value="Submit" /></center>
</body>
</html>
<script>
$(document).ready(function(){

var creatingVDivs = 0;
var creatingHDivs = 0;
var createContainer = "<div id=container></div>";
var createHorizontalDivs="<div class= hsquare><center>Etch A Sketch</center></div>";
var createVerticalDivs = "<div class= vsquare><center>Etch A Sketch</center></div>";
var trueNumberOfVerticalSquares = 0;
var trueNumberOfHorizontalSquares = 0;
var $numOfVerticalSquares = $("#vsquareInput");
var $numOfHorizontalSquares = $("#hsquareInput");
var createEtchASketchLogoDiv = "<div id = logo><center><h3>Thank you for trying Razzakun's Etch A Sketch! </h3></center></div>";
var clearQuestion = "<div id= clearQuestion><center><h2>Do you want to start over?</h2></center></div>";
var clearQuestionSpace= "<br>";
var clearQuestionSubmit ="<center><input id='clearSubmit' type='button' value='Yes!' /></center>";
var verticalSquaresQuestion = "<center><div id='verticalSquaresQuestion'>How many vertical squares of Etch A Sketch Space do you want?</div></center>";
var vSquareInput = "<center><input id='vsquareInput' type='text' value='' /></center>";
var vSubmit = "<center><input id='vsubmit' type='button' value='Submit' /></center>";
var horizontalSquaresQuestion ="<br><br><center><div id='horizontalSquaresQuestion'>How many horizontal squares of Etch A Sketch Space do you want?</div></center>";
var hSquareInput = "<center><input id='hsquareInput' type='text' value='' /></center>";
var hSubmit= "<center><input id='hsubmit' type='button' value='Submit' /></center>";

$("#vsubmit").off("click").on("click", function () {
 trueNumberOfVerticalSquares = $numOfVerticalSquares.val();
 alert(trueNumberOfVerticalSquares + " vertical squares will be created. Click OK if that's okay.");
for(creatingVDivs=0; creatingVDivs < trueNumberOfVerticalSquares; creatingVDivs++) {
            $("body").append(createVerticalDivs); 
            $(".vsquare").height("200px");
            $(".vsquare").width("200px");
            $(".vsquare").css("margin", "0px");
            $(".vsquare").css("background-color","#eef7ff");


}
if(creatingVDivs >= trueNumberOfVerticalSquares){
   $("body").append(createContainer); 
   $("#logo").detach();
   $("#container").prepend( $( ".vsquare")); 
   $("#vsubmit").detach();
   $("#vsquareInput").detach();
   $("#verticalSquaresQuestion").detach();
   $("#clearQuestion").detach();
   $("<br>").detach();
   $("#clearSubmit").detach();
   $("#container").before(createEtchASketchLogoDiv);
   $("#logo").before(clearQuestion);
   $("#logo").before(clearQuestionSpace);
   $("#clearQuestion").after(clearQuestionSubmit);  

   $("#clearSubmit").off("click").on("click", function () {

    alert("Are you sure you really want to erase your hard work? Click OK if you are.");
$(".vsquare, .hsquare").detach();
$("#clearSubmit").detach();
$("#clearQuestion").detach();
$("#horizontalSquaresQuestion").detach();
$("#hsquareInput").detach();
$("#hsubmit").detach();
$("h1").after(verticalSquaresQuestion);
$("#verticalSquaresQuestion").after(vSquareInput);
$("#vsquareInput").after(vSubmit);
$("#verticalSquaresQuestion").after($("<br>"));
$("#vsubmit").before($("<br>"));
$("#vsubmit").after(horizontalSquaresQuestion);
$("#horizontalSquaresQuestion").after(hSquareInput);
$("#hsquareInput").after(hSubmit);
$("#horizontalSquaresQuestion").after($("<br>"));
$("#hsubmit").before($("<br>"));

});
}
});
$("#hsubmit").off("click").on("click", function () {
 trueNumberOfHorizontalSquares = $numOfHorizontalSquares.val();
 alert(trueNumberOfHorizontalSquares + " horizontal squares will be created. Click OK if that's okay.");

for(creatingHDivs=0; creatingHDivs < trueNumberOfHorizontalSquares; creatingHDivs++) {

                $("body").append(createHorizontalDivs); 
                $(".hsquare").height("200px");
                $(".hsquare").width("200px");
                $(".hsquare").css("margin", "0px");
                $(".hsquare").css("background-color","#eef7ff");
                $(".hsquare").css("padding","0px");
                $(".hsquare").css("float","left");
                $(".hsquare").css("display","block");
    }
if(creatingHDivs >= trueNumberOfHorizontalSquares){
   $("body").append(createContainer); 
   $("#logo").detach();
   $("#container").prepend( $( ".hsquare")); 
   $("#hsubmit").detach();
   $("#hsquareInput").detach();
   $("#horizontalSquaresQuestion").detach();
   $("#clearQuestion").detach();
   $("<br>").detach();
   $("#clearSubmit").detach();
   $("#container").before(createEtchASketchLogoDiv);
   $("#logo").before(clearQuestion);
   $("#logo").before(clearQuestionSpace);
   $("#clearQuestion").after(clearQuestionSubmit);

   $("#clearSubmit").off("click").on("click", function () {

    alert("Are you sure you really want to erase your hard work? Click OK if you are.");
$(".vsquare, .hsquare").detach();
$("#clearSubmit").detach();
$("#clearQuestion").detach();
$("#verticalSquaresQuestion").detach();
$("#vsquareInput").detach();
$("#vsubmit").detach();
$("h1").after(verticalSquaresQuestion);
$("#verticalSquaresQuestion").after(vSquareInput);
$("#vsquareInput").after(vSubmit);
$("#verticalSquaresQuestion").after($("<br>"));
$("#vsubmit").before($("<br>"));
$("#vsubmit").after(horizontalSquaresQuestion);
$("#horizontalSquaresQuestion").after(hSquareInput);
$("#hsquareInput").after(hSubmit);
$("#horizontalSquaresQuestion").after($("<br>"));
$("#hsubmit").before($("<br>"));


});
}

});

});
</script>

如果您想续订事件处理程序，请在重新创建DOM元素后再次尝试调用它们：

$("#vsubmit").before($("<br>"));
$("#vsubmit").after(horizontalSquaresQuestion);
$("#vsubmit").off("click").on("click", function () { ... });

由于function () { ... }现在被多次递归使用，您必须将其分配给一个变量。

var vsubmitListener = function () {
    trueNumberOfVerticalSquares = $numOfVerticalSquares.val();
    alert(trueNumberOfVerticalSquares + " vertical squares will be created. Click OK if that's okay.");
    for (creatingVDivs = 0; creatingVDivs < trueNumberOfVerticalSquares; creatingVDivs++) {
        $("body").append(createVerticalDivs);
        $(".vsquare").height("200px");
        $(".vsquare").width("200px");
        $(".vsquare").css("margin", "0px");
        $(".vsquare").css("background-color", "#eef7ff");
    }
    if (creatingVDivs >= trueNumberOfVerticalSquares) {
        $("body").append(createContainer);
        $("#logo").detach();
        $("#container").prepend($(".vsquare"));
        $("#vsubmit").detach();
        $("#vsquareInput").detach();
        $("#verticalSquaresQuestion").detach();
        $("#clearQuestion").detach();
        $("<br>").detach();
        $("#clearSubmit").detach();
        $("#container").before(createEtchASketchLogoDiv);
        $("#logo").before(clearQuestion);
        $("#logo").before(clearQuestionSpace);
        $("#clearQuestion").after(clearQuestionSubmit);
        $("#clearSubmit").off("click").on("click", function () {
            alert("Are you sure you really want to erase your hard work? Click OK if you are.");
            $(".vsquare, .hsquare").detach();
            $("#clearSubmit").detach();
            $("#clearQuestion").detach();
            $("#horizontalSquaresQuestion").detach();
            $("#hsquareInput").detach();
            $("#hsubmit").detach();
            $("h1").after(verticalSquaresQuestion);
            $("#verticalSquaresQuestion").after(vSquareInput);
            $("#vsquareInput").after(vSubmit);
            $("#verticalSquaresQuestion").after($("<br>"));
            $("#vsubmit").before($("<br>"));
            $("#vsubmit").after(horizontalSquaresQuestion);
            /* Now that is has a name, we can recursively call it */
            $("#vsubmit").off("click").on("click", vsubmitListener);
            /* We couldn't do that when it was an anonymous function literal  */
            $("#horizontalSquaresQuestion").after(hSquareInput);
            $("#hsquareInput").after(hSubmit);
            $("#horizontalSquaresQuestion").after($("<br>"));
            $("#hsubmit").before($("<br>"));
        });
    }
};
$("#vsubmit").off("click").on("click", vsubmitListener);

您也必须为#hsubmit执行此操作。

以下片段对我有效：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <title>Razzakun's Etch A Sketch</title>
</head>
<body>
  <center>
    <h1>Welcome to Razzakun's Etch A Sketch</h1>
    <center>
      <center>
        <div id="verticalSquaresQuestion">How many vertical squares of Etch A Sketch Space do you want?</div>
      </center>
      <br>
      <center>
        <input id="vsquareInput" type="text" value="" />
      </center>
      <br>
      <center>
        <input id="vsubmit" type="button" value="Submit" />
      </center>
      <br>
      <center>
        <div id="horizontalSquaresQuestion">How many horizontal squares of Etch A Sketch Space do you want?</div>
      </center>
      <br>
      <center>
        <input id="hsquareInput" type="text" value="" />
      </center>
      <br>
      <center>
        <input id="hsubmit" type="button" value="Submit" />
      </center>
</body>
</html>
<script>
  $(document).ready(function() {
    var creatingVDivs = 0;
    var creatingHDivs = 0;
    var createContainer = "<div id=container></div>";
    var createHorizontalDivs = "<div class= hsquare><center>Etch A Sketch</center></div>";
    var createVerticalDivs = "<div class= vsquare><center>Etch A Sketch</center></div>";
    var trueNumberOfVerticalSquares = 0;
    var trueNumberOfHorizontalSquares = 0;
    var $numOfVerticalSquares = $("#vsquareInput");
    var $numOfHorizontalSquares = $("#hsquareInput");
    var createEtchASketchLogoDiv = "<div id = logo><center><h3>Thank you for trying Razzakun's Etch A Sketch! </h3></center></div>";
    var clearQuestion = "<div id= clearQuestion><center><h2>Do you want to start over?</h2></center></div>";
    var clearQuestionSpace = "<br>";
    var clearQuestionSubmit = "<center><input id='clearSubmit' type='button' value='Yes!' /></center>";
    var verticalSquaresQuestion = "<center><div id='verticalSquaresQuestion'>How many vertical squares of Etch A Sketch Space do you want?</div></center>";
    var vSquareInput = "<center><input id='vsquareInput' type='text' value='' /></center>";
    var vSubmit = "<center><input id='vsubmit' type='button' value='Submit' /></center>";
    var horizontalSquaresQuestion = "<br><br><center><div id='horizontalSquaresQuestion'>How many horizontal squares of Etch A Sketch Space do you want?</div></center>";
    var hSquareInput = "<center><input id='hsquareInput' type='text' value='' /></center>";
    var hSubmit = "<center><input id='hsubmit' type='button' value='Submit' /></center>";
    var vsubmitListener = function() {
      trueNumberOfVerticalSquares = $numOfVerticalSquares.val();
      alert(trueNumberOfVerticalSquares + " vertical squares will be created. Click OK if that's okay.");
      for (creatingVDivs = 0; creatingVDivs < trueNumberOfVerticalSquares; creatingVDivs++) {
        $("body").append(createVerticalDivs);
        $(".vsquare").height("200px");
        $(".vsquare").width("200px");
        $(".vsquare").css("margin", "0px");
        $(".vsquare").css("background-color", "#eef7ff");

      }
      if (creatingVDivs >= trueNumberOfVerticalSquares) {
        $("body").append(createContainer);
        $("#logo").detach();
        $("#container").prepend($(".vsquare"));
        $("#vsubmit").detach();
        $("#vsquareInput").detach();
        $("#verticalSquaresQuestion").detach();
        $("#clearQuestion").detach();
        $("<br>").detach();
        $("#clearSubmit").detach();
        $("#container").before(createEtchASketchLogoDiv);
        $("#logo").before(clearQuestion);
        $("#logo").before(clearQuestionSpace);
        $("#clearQuestion").after(clearQuestionSubmit);
        $("#clearSubmit").off("click").on("click", function() {
          alert("Are you sure you really want to erase your hard work? Click OK if you are.");
          $(".vsquare, .hsquare").detach();
          $("#clearSubmit").detach();
          $("#clearQuestion").detach();
          $("#horizontalSquaresQuestion").detach();
          $("#hsquareInput").detach();
          $("#hsubmit").detach();
          $("h1").after(verticalSquaresQuestion);
          $("#verticalSquaresQuestion").after(vSquareInput);
          $("#vsquareInput").after(vSubmit);
          $("#verticalSquaresQuestion").after($("<br>"));
          $("#vsubmit").before($("<br>"));
          $("#vsubmit").after(horizontalSquaresQuestion);
          $("#horizontalSquaresQuestion").after(hSquareInput);
          $("#hsquareInput").after(hSubmit);
          $("#horizontalSquaresQuestion").after($("<br>"));
          $("#hsubmit").before($("<br>"));
          $("#vsubmit").off("click").on("click", vsubmitListener);
          $("#hsubmit").off("click").on("click", hsubmitListener);
        });
      }
    };
    var hsubmitListener = function() {
      trueNumberOfHorizontalSquares = $numOfHorizontalSquares.val();
      alert(trueNumberOfHorizontalSquares + " horizontal squares will be created. Click OK if that's okay.");
      for (creatingHDivs = 0; creatingHDivs < trueNumberOfHorizontalSquares; creatingHDivs++) {
        $("body").append(createHorizontalDivs);
        $(".hsquare").height("200px");
        $(".hsquare").width("200px");
        $(".hsquare").css("margin", "0px");
        $(".hsquare").css("background-color", "#eef7ff");
        $(".hsquare").css("padding", "0px");
        $(".hsquare").css("float", "left");
        $(".hsquare").css("display", "block");
      }
      if (creatingHDivs >= trueNumberOfHorizontalSquares) {
        $("body").append(createContainer);
        $("#logo").detach();
        $("#container").prepend($(".hsquare"));
        $("#hsubmit").detach();
        $("#hsquareInput").detach();
        $("#horizontalSquaresQuestion").detach();
        $("#clearQuestion").detach();
        $("<br>").detach();
        $("#clearSubmit").detach();
        $("#container").before(createEtchASketchLogoDiv);
        $("#logo").before(clearQuestion);
        $("#logo").before(clearQuestionSpace);
        $("#clearQuestion").after(clearQuestionSubmit);
        $("#clearSubmit").off("click").on("click", function() {
          alert("Are you sure you really want to erase your hard work? Click OK if you are.");
          $(".vsquare, .hsquare").detach();
          $("#clearSubmit").detach();
          $("#clearQuestion").detach();
          $("#verticalSquaresQuestion").detach();
          $("#vsquareInput").detach();
          $("#vsubmit").detach();
          $("h1").after(verticalSquaresQuestion);
          $("#verticalSquaresQuestion").after(vSquareInput);
          $("#vsquareInput").after(vSubmit);
          $("#verticalSquaresQuestion").after($("<br>"));
          $("#vsubmit").before($("<br>"));
          $("#vsubmit").after(horizontalSquaresQuestion);
          $("#horizontalSquaresQuestion").after(hSquareInput);
          $("#hsquareInput").after(hSubmit);
          $("#horizontalSquaresQuestion").after($("<br>"));
          $("#hsubmit").before($("<br>"));
          $("#vsubmit").off("click").on("click", vsubmitListener);
          $("#hsubmit").off("click").on("click", hsubmitListener);
        });
      }
    };
    $("#vsubmit").off("click").on("click", vsubmitListener);
    $("#hsubmit").off("click").on("click", hsubmitListener);
  });
</script>

不过，我的建议是，不要删除任何你一开始就不想删除的元素。

编辑：

我已经有一段时间没有使用jQuery了，因为我更喜欢使用原生JavaScript。在本机JavaScript中，是否需要在元素被移除并重新插入DOM时重新附加事件侦听器。

jQuery .on()处理程序应该导致持久的事件处理，将事件侦听器添加到插入到DOM中与选择器匹配的任何元素中。我认为这个问题也可以通过弄清楚为什么您的代码以某种方式让jQuery删除.on()事件侦听器来解决。

相关文章：