Javascript 删除时打开文本区域| jQuery

我是jQuery新手。我只想把它整理一下。当删除某个内容时，它会隐藏并使用“保存”按钮打开文本区域。单击“保存”按钮时，文本区域中的文本将写入段落

我搜索了很多，发现了这些小提琴：

我想“合并”它们的功能，但当我尝试时，它不起作用。这是我的密码：

$('#sortable').sortable().droppable({
    drop: function(ev, ui){
        $(ui.draggable).html('<a id="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
    }
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});

$('#send-thoughts').click(function() 
{ var thought = $('textarea[name=message]').val();
  alert(thought);
});

$（'#sortable'）.sortable（）.dropable({
下拉：功能（ev、ui）{
$（ui.draggable.html（“”）；
}
});
$（#draggables li'）。draggable({
connectToSortable:“#可排序”，
助手：“克隆”，
还原：“无效”，
光标：“移动”
});
$（“#发送想法”）。单击（函数（）
{var think=$（'textarea[name=message]'）。val（）；
警惕（思想）；
});

---

这是我的作品——jsfiddle.net/CxpMn/102/（对不起，我需要更多的声誉来发布更多的链接）。求求你，救命

问题在于，在将

单击

处理程序添加到DOM之前，您正在将其附加到

#发送想法

。请尝试以下操作：

$('#sortable').sortable().droppable({
    drop: function(ev, ui){
        $('#my-container').show();
    }
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});

$('#send-thoughts').click(function() 
{ var thought = $('textarea[name=message]').val();
  alert(thought);
});

在您的HTML文件中：

几个问题：

首先，ID不能在页面中重复，因此您需要使用类来代替

#send thinks

其次，您不能将单击处理程序分配给尚不存在的元素；因此，我们需要将该事件处理程序委托给确实存在的元素，并针对其中的未来元素

第三，我们需要定位与单击的元素相关的textarea

$('#sortable').sortable().droppable({
    drop: function(ev, ui){
        // use class instead of ID
        $(ui.draggable).html('<a class="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
    }
});

// delegate event to account for future elements
$(document).on('click','.send-thoughts',function() {
    // get the nearest textarea
   var thought = $(this).siblings('textarea[name=message]').val();
  alert(thought);
});

$（'#sortable'）.sortable（）.dropable({
下拉：功能（ev、ui）{
//使用类而不是ID
$（ui.draggable.html（“”）；
}
});
//委派事件以说明未来的元素
$（文档）。在（'单击'，'上。发送想法'，函数（）{
//获取最近的文本区域
var think=$（this.sibbins（'textarea[name=message]'））.val（）；
警惕（思想）；
});