當刪除打開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>