如何在保留以前的字段值的同时使用 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. 每次创建新字段时，都会擦除以前的字段值。（我不知道为什么，它应该添加新的内部HTML行，为什么以前的值会擦除？
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();
    });