Question

<span id="n-email" class="email-btn"><a href="#."></a></span>

单击此按钮，带有文本字段的列表项显示

<li id="new" class="select">
    <a>
        <input type="text" id="emails" class="add-email" value="Untitled" onfocus="if(this.value=='Untitled'){this.value=''}" onblur="if(this.value=='')  {this.value='Untitled'}"/>
    </a>
</li>

假设我填写了此输入字段中的内容并按Enter键在按下回车时我想发起一个

的事件

删除包含输入字段的<li>。

在其位置插入新的<li>，例如

<li>
    <a href="#.">
        //here comes the value what we entered in the input field of above li//
    </a>
</li>

Answer 1

你可以尝试这个..但是你必须将它修改为你的示例值：

$('li').each(function() {
    var input = $(this).find('input');
    $(this).append(input.val());
    input.remove();
});

Answer 2

首先，您需要隐藏#new行，然后需要使用keypress事件来捕获回车键，最后使用append()方法插入新元素。< / p>

以下是基于您的脚本的示例

$(".email-btn").click(function() {
    $("#new").show();
});

$("#emails").keypress(function(e)
{
    value = $(this).val();
    code= (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
        $("#new").remove();
        $("#mylist").append("<li><a>"+value+"</a></li>");
    }

});

Demo

动态生成<li>？</li>

2 个答案: