当删除打开textarea | jQuery

Question

我是新的jQuery。我只想要做出排序。当某些东西被丢弃时，它隐藏并用保存按钮打开textarea。点击保存按钮时，textarea的文本写入段落。

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

我要“合并”其功能，但是当我尝试它不工作。这里是我的代码：

$('#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); 
}); 

这里是我的工作小提琴 - jsfiddle.net/CxpMn/102/（对不起，我需要更多的声誉发布更多的链接）。请帮忙！

Answer 1

几个问题：

首先，ID不能在一个页面被复制，所以你需要使用类而不是#send-thoughts。

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

第三，我们需要针对所涉及到的元素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); 
}); 

DEMO

Answer 2

问题在于，在将它添加到DOM之前，您将click处理程序附加到#send-thoughts。你可以试试下面的：

$('#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放：

<div id="my-container" style="display: none"> 
 
    <a id="send-thoughts" href="">Click</a><textarea name="message"></textarea> 
 
</div>