javascript - 删除 html 自动对焦使用 javascript/jquery

Question

这是我的完整代码:

$('input').keypress(function(e){
    var code = e.keyCode || e.which,
    value    = $(this).val()

    if (code==13 && value!=''){
        $('.with-header').show()

        var secondaryContent = 'secondary-content',
        materialIcons        = 'material-icons',
        conllectiontItem     = 'collection-item'

        $('ul').append('<li class='+conllectiontItem+'>\
            <span class="words">'+value+'</span>\
            <span href="#" class='+secondaryContent+'>\
            <a class="'+materialIcons+' done">done</a>\
            <a class="'+materialIcons+' delete">delete</a>\
            <a class="'+materialIcons+' edit">edit</a>\
            </span></li>')

        //this to empty input
        $(this).val('')
    }
})

$('body').on('click', '.done', function(){
    $(this).parents('.collection-item').toggleClass('lineThrough')
})

$('body').on('click', '.edit', function(){
    var edit = $(this).parent().prev().html('<input class="listInput">')
})

$('body').on('click', '.delete', function(){
    $(this).parents('.collection-item').remove()
})

$('body').on('keypress','.listInput', function(e){
    var code = e.keyCode || e.which,
    value    = $(this).val()

    if (code==13 && value!=''){
        $(this).parent().html(value)
    }
})

抱歉，我还是初学者，我使用的是 materialize css 框架，所以添加起来有点复杂。

我想做的是制作待办事项列表，可以通过单击带有“.edit”类的按钮来编辑每个列表，我想在附加了 <input> 的列表中提供自动对焦功能。 , 但自动对焦只能工作一次。我想这是因为我为每个“.listInput”设置了自动对焦。

因此，在我附加 html 输入并完成列表编辑后，我想尝试从“.listInput”中删除“自动对焦”，但我不知道该怎么做？

你能帮我解决这个问题吗？或者你有其他解决方案吗？谢谢

Answer 1

那么，在那种情况下尝试:

$('body').on('click', '.edit', function(){        
  $toEdit = $(this).parent().prev();
  $toEdit.html('<input class="listInput">')
  $toEdit.focus();
});