Javascript jQuery++；，关于.selection（）的问题

所有人。
我有一个小问题；我正在尝试构建所见即所得，但遇到了一些问题。
我有一个id=desc2的contenteditable div和一些按钮。让我们以“粗体”按钮为例

我已经删除了脚本的另一部分，因为如果我能让它工作，我就完成了：D
所以，正如我所说的，如果我这样做，一切都很好：我在div上插入一个部分，然后在控制台上输出内容。 但这不是我想做的。我写道：

$('.magicbutton.uno').on('click', function(){
    var id = $(this).parent().attr("magic_id");
    var selection = $("#"+id).selection(),
    text = $("#"+id).text().substring(selection.start, selection.end);
    console.log(text);
});

每次单击时，都会更改div的ID，并输出所选文本，但不会更改。
代码是相同的，我检查了第一个脚本中的

$（this）

是否与第二个脚本中的

$（“#”+id）

相同

我能做什么？谢谢

---

编辑：

当DIV失去焦点时，选择将无效。作为解决方法，您可以使用数据对象：

---

如果单击oustide input/textarea（或什么？？），选择是否会松动？也许你可以提供一个JSFIDLE让你的问题更清楚，因为在这里你使用了一些选择器，而不让我们看到任何相关的HTML标记，例如，

“#”+id

元素是什么？谢谢你的快速回答，这很有效，但我想避免使用mouseup事件，我所要问的是为什么mouseup可以工作，而用相同的代码单击却不能。编辑：哦，我现在明白了，这是因为聚焦的缺失。。。我会设法找到一种方法，用鼠标控制焦点。谢谢

$('#desc2').on('mouseup', function() {
    var selection = $(this).selection(),
        text = $(this).text().substring(selection.start, selection.end);
    console.log(text);
});

$('.magicbutton.uno').on('click', function(){
    var id = $(this).parent().attr("magic_id");
    var selection = $("#"+id).selection(),
    text = $("#"+id).text().substring(selection.start, selection.end);
    console.log(text);
});

$('.magicbutton.one').on('click', function(){
    var id = $(this).parent().attr("magic_id"); //id = desc2, i used this because i could have multiple forms in a page
    var selection = $("#"+id).data('selection');
    alert(selection);
}); //This doesn't work

$('#desc2').on('mouseup', function() {
    var selection = $(this).selection(),
        text = $(this).text().substring(selection.start, selection.end);
    $(this).data('selection', text);
});