12

有人可以解释为什么以下代码段不能同时添加<foo>和#a吗#b？

HTML：

<div id="a"></div>
<div id="b"></div>

JS：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});

jsfiddle

编辑：感谢您的帮助，.append()移动元素的事实解释了这种行为。由于我的应用程序中的元素实际上是一个 Backbone View 的.el，我不想克隆它。

4

5 回答 5

20

因为 usingappend实际上会移动元素。因此，您的代码正在$foo移入文档中#a，然后将其#a移至#b. 您可以像这样克隆它以获得所需的效果 - 这样它会附加一个克隆而不是初始元素：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

您还可以附加htmlfrom $foo，它只会在其中获取 dom 的副本，而不是元素本身：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo[0].outerHTML);
    $("#b").append($foo[0].outerHTML);
});

上面的示例假设您有一个更复杂的场景，其中$foo不仅仅是从字符串创建的 jQuery 对象......更有可能是从 DOM 中的元素创建的。

如果它实际上只是简单地以这种方式创建并为此目的......根本没有理由创建该jQuery对象，您可以简单地直接附加字符串本身（"<foo>HI</foo>"），例如：

var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...
于 2013-07-16T17:48:56.153 回答
12

试试clone。顾名思义，这将复制$foo元素而不是移动，就像append这样做一样。

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

但是，为什么不直接使用它呢？

$("#a,#b").append($foo);

这也将起作用:)

这是这两种情况的演示：http: //jsfiddle.net/hungerpain/sCvs7/3/

于 2013-07-16T17:48:47.400 回答
9

You need to create a new instance every single time you want to append to the DOM.

Otherwise it refers to the same instance which was already appended.

Remove the $ symbol preceding the new div to be added as that evaluates to a jQuery object and has the limitations as above stated. or clone the element.

$(function(){
    var foo = "<foo>HI</foo>";
    $("#a").append(foo);
    $("#b").append(foo);
});

Check Fiddle

于 2013-07-16T17:47:18.497 回答
4

您可以使用 .clone() 方法创建一个新实例以附加到 DOM，因为您当前的代码只是两次引用同一个实例。

$(function(){
    var $foo = $("<foo>HI</foo>");
    var $foo2 = foo.clone();
    $("#a").append($foo);
    $("#b").append($foo2);
});
于 2013-07-16T17:48:43.913 回答
0

我尝试了一个技巧，它奏效了。我只是将一个按钮单击的功能嵌套在另一个按钮中。我的意思是我每次都在改变父母以避免这个问题。主要的是，当我为 button1 click 编写 click 函数时，button2 逻辑写在下面，而 button3 click 逻辑写在 button2 click 方法中，就像层次结构一样。只看代码。你会得到的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>DOM Element Inserting!</h1>
    <div id="parent">
      <div id="result">
        <button id="btn1" type="submit" class="btn btn-primary">
          Start Cooking
        </button>
      </div>
    </div>
    <div id="parent2"></div>
    <div id="parent3"></div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("#btn1").click(function () {
          $("#lt").remove();
          $("#parent2").html(`

                <button id="btn2" type="button" class="btn btn-success">
        Being Prepared
      </button>
                `);
          $("#btn1").remove();
          $("#btn2").click(function () {
            $("#parent3").html(`

                <button id="btn3" type="button" class="btn btn-info">
        Order Ready
      </button>
                `);
            $("#parent2").remove();
            $("#btn3").click(function () {
              alert("Order Completed!!");
            });
          });
        });
      });
    </script>
  </body>
</html>

于 2020-10-01T18:09:22.160 回答