Question

我是jquery的新手。我想将输入的值添加到新的div中。问题是新值出现但也立即消失。这是html代码：

<form class="form-inline">
  <input type="text" name="input" value="Add an item here" onfocus="value=''" class="add-item" >
  <button type="submit" class="btn" name="submit"><img src="img/pipe.png" alt=""></button>
</form>

<div class="col-lg-12 list">
                        <div class="list-row">
                            <div class="trash"></div>
                            <div class="list-tag">
                                 <p>chicken and salt</p>
                            </div>
                            <div class="pipe"></div>
                        </div>
                        <div class="list-row">
                            <div class="trash"></div>
                            <div class="list-tag">
                                 <p>chicken and salt</p>
                            </div>
                            <div class="pipe"></div>
                        </div>
                    </div>

这是js：

$('.add-item').keypress(function(event){
        if (event.keyCode === 13) 
        {
        var value = $(this).val();
        var addListItem = $('<div class="trash"></div> '+value+' <div class="pipe"></div>');
        $('.col-lg-12').prepend(addListItem); 
        }
    });

你能帮我解决一下这个问题吗？

Answer 1

执行js后，可能会重新加载页面。

您必须停止事件传播。

$('.add-item').keypress(function(event){
        if (event.keyCode === 13) 
        {
          var value = $(this).val();
          var addListItem = $('<div class="trash"></div> '+value+' <div class="pipe"></div>');
          $('.col-lg-12').prepend(addListItem);
          return false; // <-- this line
        }
    });

在表单中按return将自动提交。

Answer 2

选中 Demo Fiddle 。

$('.add-item').keypress(function(event){
        if (event.keyCode === 13) 
        {
        var value = $(this).val();
        var addListItem = $('<div class="trash"></div> '+value+' <div class="pipe"></div>');
        $('.col-lg-12').prepend(addListItem); 
        }
});

$(".form-inline").submit(function(e){
        e.preventDefault();
});

您的问题是，该表单已在＆＃39;输入＆＃39;按。因此，要防止默认操作，请使用 e.preventDefault();

Answer 3

这是因为您未在函数中调用event.preventDefault()，这意味着您的表单会照常提交并最终导致页面重新加载。

只需在if声明中添加：

if (event.keyCode === 13) 
{
    event.preventDefault();
    ...
}

如何附加到div

3 个答案: