当我调用 .html() 函数时脚本中断

Question

我不知道这是怎么回事。当我移动行 "$("#mc").html(newdivid);"到函数的开头（在 .clone() 状态之上）它可以工作，但函数的其余部分将无法工作。如果我将这一行移到末尾，就像现在一样，该函数的其余部分可以工作，但这一行将无法工作。我很困惑。

<html>

<head>

    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        var newdiv;

        var divcntr = 1;

        var newdivid;

        $(document).ready(function() {

            $('#clone_button').click(function(){

                newdivid = divcntr++;

                //we select the box clone it and insert it after the box

                $("#origdiv").clone().appendTo('.maincontainer');

                newdiv = $('.maincontainer').children().last();

                newdiv.setAttribute("id", newdivid);

                $("#mc").html(newdivid);

            });
        });

    </script>

</head>

<body>

    <input type="button" value="Clone box" class="button" id="clone_button"/>

    <input type="button" value="Extra button" class="button" id="std_button" />

    <div class="internal" id="origdiv"></div>

    <div class="maincontainer" id="mc">sdfgdfg</div>

</body>

</html>

这是我的 css...

.maincontainer {
    margin: 20px auto;
    width: 100%;
    height: 800px;
    border-style: solid;
    border-width: 2px;
    background-color: cyan;
}

.internal {
    margin: 10px;
    display: inline-block;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    width: 200px;
    height:200px;
    background-color: red;
}

.button {
    width: 100px;
    height: 20px;
}

#clone_button {
    background-color: blue;
}

#std_button {
    background-color: yellow;
}

Answer 1

有一件事是错误的是这一行：

newdiv.setAttribute("id", newdivid);

在您的代码中，newdiv 指的是 jQuery 对象，而不是 DOM 元素，并且 jQuery 对象没有 setAttribute方法。他们有一个 attr 方法：

newdiv.attr("id", newdivid);

您还可以做其他几件事来改进该代码，例如：

仅将变量范围限定在需要的地方，而不是扩大范围
使用对您已有的克隆元素的引用，而不是使用 .children().last()
以可读的方式缩进代码

例如：

var divcntr = 1;

$(document).ready(function() {

    $('#clone_button').click(function() {
        var newdivid = divcntr++;

        $("#origdiv").clone()
            .attr("id", newdivid)
            .appendTo('.maincontainer');

        $("#mc").html(newdivid);
    });
});

另请注意，虽然全数字 id 值完全有效，但如果您需要在 CSS 选择器中使用它们，它们会很尴尬。您可以考虑更改

.attr("id", newdivid)

至

.attr("id", "x" + newdivid)

...或类似的，为了让生活更轻松，if 你将在 CSS 选择器中使用那些 id 值。

实例：

var divcntr = 1;

$(document).ready(function() {

  $('#clone_button').click(function() {
    var newdivid = divcntr++;

    $("#origdiv").clone()
      .attr("id", newdivid)
      .appendTo('.maincontainer');

    $("#mc").html(newdivid);
  });
});

<div id="origdiv">This is the div that gets cloned</div>
<hr>
<div class="maincontainer">
  This is the container the divs end up in
</div>
<hr>
<input type="button" id="clone_button" value="Clone">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

回复您发布 HTML 的更新问题：当然

$("#mc").html(newdivid);

line is going to wipe out the cloned div: 您已将克隆的 div 附加到 .maincontainer，即 #mc。如果您在引用它的两个地方都为该元素使用了相同的选择器，那么从一开始就很清楚了。

如果你想在 .maincontainer 的顶部设置一个计数器，你需要将它放在子元素中，如下所示：

<div class="maincontainer">
    <div id="mc"></div>
    sdfgdfg
 </div>

现在，#mc 和 .maincontainer 不再引用同一个元素，您可以覆盖 #mc 的内容而不用覆盖 .maincontainer 的内容内容。 :-)

这是您的代码的工作副本，其中仅 .attr 修正和 #mc/.maincontainer 修正：

var newdiv;

var divcntr = 1;

var newdivid;

$(document).ready(function() {

  $('#clone_button').click(function() {

    newdivid = divcntr++;

    //we select the box clone it and insert it after the box

    $("#origdiv").clone().appendTo('.maincontainer');

    newdiv = $('.maincontainer').children().last();

    newdiv.attr("id", newdivid);

    $("#mc").html(newdivid);

  });
});

.maincontainer {
  margin: 20px auto;
  width: 100%;
  height: 800px;
  border-style: solid;
  border-width: 2px;
  background-color: cyan;
}
.internal {
  margin: 10px;
  display: inline-block;
  border-style: solid;
  border-width: 2px;
  border-radius: 5px;
  width: 200px;
  height: 200px;
  background-color: red;
}
.button {
  width: 100px;
  height: 20px;
}
#clone_button {
  background-color: blue;
}
#std_button {
  background-color: yellow;
}

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type="button" value="Clone box" class="button" id="clone_button" />

<input type="button" value="Extra button" class="button" id="std_button" />

<div class="internal" id="origdiv"></div>

<div class="maincontainer">
  <div id="mc"></div>
  sdfgdfg
</div>

Answer 2

首先，您正在处理 jQuery 对象以设置属性。您需要将其用作 html 对象，然后使用属性 "attr" 来设置 id 属性。如下所示：
var newdiv;

var divcntr = 1;

var newdivid;

$(document).ready(function() {

$('#clone_button').click(function(){

newdivid = divcntr++;

$("#origdiv").clone().appendTo('.maincontainer');

newdiv = $('.maincontainer').children().last();
$(newdiv).attr("id", newdivid);


$("#mc").html(newdivid);

});
});

当我调用 .html() 函数时脚本中断

Script is breaking when I call .html() function

html

jquery

jscript