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

问题是您在将click处理程序添加到DOM之前将其附加到#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中：

＆＃13;

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

＆＃13;

Answer 2

几个问题：

首先，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

当打开textarea | jQuery的

2 个答案: