javascript - 如何在保留先前字段值的同时使用 innerHTML 创建新字段？如何在再次调用之前完全执行 .click？

Question

我发誓，这个问题可能在其他地方，但我找不到！但在这里：http: //jsfiddle.net/YUgxE/

Javascript：

var update = $("#CalcUpdate");
var content = document.getElementById("CalcContent");

update.click(function() { //update
    content.innerHTML += "<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>";
    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
});

});

HTML：

<button id="CalcUpdate">update</button>

这背后真的有两个问题：

1. 每次创建新字段时，都会删除以前的字段值。（我不知道为什么，它应该添加新的 innerHTML 行，为什么以前的值会被删除？）
2. 如果我快速单击更新，功能会重叠，我不知道如何以这种格式使一个在另一个之前执行。我见过其他问题，但它们都涉及使用两个功能或其他我不想做的事情。

Answer 1

您正在使用 jquery，所以请使用它！:) 这是我更新脚本的方式：

http://jsfiddle.net/YUgxE/3/

var $update = $("#CalcUpdate");
    var $content = $('#CalcContent');

$update.click(function() { //update
        var $obj = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>");
    $obj.appendTo($content).slideToggle(400, function() { $obj.removeClass() });
});

注意事项：

• 使用 jquery 查找内容，类似于查找更新区域的方式
• 使用 jquery 构造一个新对象 ( $obj) 而不是使用 innerHTML 并添加字符串
• 使用 jquery append/appendTo添加$obj到$content而不是使用 innerHTML
• 直接使用 $obj 来执行slideToggle（因此，没有查找）。这解决了您在快速单击时看到的操作时间/顺序问题。

Answer 2

试试这个如果我理解正确，这将保留您填写的任何输入并添加更多：

update.click(function() { //update
var showinput = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>").insertBefore(content);

    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
    });