使用按键事件添加元素答案

【问题标题】：Adding an element with keypress event使用按键事件添加元素
【发布时间】：2014-12-09 21:24:13
【问题描述】：

所以我只是在学习 JavaScript，并且正在尝试为我教会的日托制作一个付款计算器。我希望将第二个带有“child”类的div（里面的所有“东西”）添加到id为“children”的div中。我有一个简单的 div 添加一个按键，但它不会添加第三个。如何添加多个 div 以及如何添加包含所有“东西”的 div？代码如下：

 <div id="input">
    <div id="children">
        <div class="child">
        <h2>Choose Child's Class</h2>
        <select id="primary" class="selector">
            <option value=" ">Select Class</option>
            <option value=200>Infants</option>
            <option value=175>Wobblers</option>
            <option value=175>Toddlers</option>
            <option value=165>PreSchool 3's</option>
            <option value=165>PreK 4's</option>
            <option value=75>Schooler Before &amp; After</option>
            <option value=40>Schooler Before Only</option>
            <option value=65>Schooler After Only</option>
            <option value=60>Schooler AFA Before &amp; After</option>
            <option value=20>Schooler AFA Before Only</option>
            <option value=30>Schooler AFA After Only</option>
            <option value=40>Part Time</option>
        </select>
        </div><!--closes child class div-->
   </div><!--closes children id dive-->

    <h3> Press any key on your keyboard to add another child</h3>

和javascript

$(document).ready(function(){
    var $newChild=$('<div class="child">Testing</div>');
    $(document).keyup(function(){
        $newChild.appendTo($('#children'));
    });
});

【问题讨论】：

标签： javascript html events keypress

【解决方案1】：

所以对于初学者来说，这就是你的 javascript 应该是这样的，这样你就可以添加许多 div

$(document).ready(function(){
    $(document).on('keyup', function(){
        var $newChild=$('<div class="child">Testing</div>');
        $newChild.appendTo($('#children'));
    });
});

或

$(document).ready(function(){
    $(document).on('keyup', function(){
        var $newChild=$('<div class="child">Testing</div>'); 
        $('#children').append($newChild);
    });
});

您需要澄清剩下的问题，为什么要说东西？

【讨论】：

这是正确的答案，但你知道为什么吗？（我不是 OP）:)
之所以会这样，是因为他在作用域外声明了变量，第一次变量在作用域内，但下次触发事件时，变量将超出作用域且未定义。跨度>
我认为 keyup 会不断附加同一个对象，替换自己。在 OPs 代码中，只有一个 newChild
追加是添加到对象（DOM）而不是替换，总是在底部。 api.jquery.com/appendto供参考
我希望看到一个 clone()。当你访问同一个对象时，它只是四处移动

【解决方案2】：

你的 jQuery 需要是这样的：

$(document).ready(function() {
    var childHtml = "<div class='child'>Child</div>";
    $(document).keyup(function() {        
        $('#children').append(childHtml);
    });
});

jsFiddle：http://jsfiddle.net/ek922tz2/7/

【讨论】：

可以，真的要看用户的使用情况。 keypress 只接受输入字符，所以箭头等不会触发它。我只选择了“keyup”，因为 OP 正在使用它。
按键的问题是，如果您按住按键，按键会重复，导致意外添加的项目过多。
keypress、keydown 和 keyup 都可以。仅取决于您希望代码如何运行。