javascript - jQuery++、.selection() の問題

Question

みんな。
少し問題があります。WYSIWYG を構築しようとしていますが、いくつか問題が発生しました。
id = desc2 の contenteditable div といくつかのボタンがあります。たとえば、「太字」ボタンを見てみましょう。

<div class="magic" magic_id="desc2">
    <div class="magicbutton one" magic="[b]%s[/b]">
        <span style="font-weight:bold;">Bold</span>
    </div>
</div>

そして、私はいくつかのjQuery ++選択アプリケーションを次の場所に持っています:

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

スクリプトの他の部分を消去しました。これがうまく機能すれば完了です :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 が変更され、選択したテキストが出力されるはずですが、そうではありません。コードは同じで、最初のスクリプトが2 番目のスクリプトと同じであることを
確認しました。 $(this)$("#"+id)

私に何ができる？ありがとう！

編集：jsFiddle