JQueryMobile MobileInit Scripting

HTML

<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $(document).bind("mobileinit", function() {
            console.log("Mobile init");
            $.mobile.ignoreContentEnabled = true;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        function getSelectionStartNode() {
            var node, selection;
        console.log("getSelectionStartNode...");
        
            if (window.getSelection) {
                selection = getSelection();
        console.log(selection);
                node = selection.anchorNode;
        console.log(node);
            }
            if (!node && document.selection) { // IE
                selection = document.selection
                var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
                node = range.commonAncestorContainer ? range.commonAncestorContainer : range.parentElement ? range.parentElement() : range.item(0);
            }
        
            if (node) {
                return (node.nodeName == "#text" ? node.parentNode : node);
            }
        }

        $(function() {
            $("#editLink").hide();
            $("#linktext").bind('keyup change', function() {
                var $node = $("#editLink").data('node');
                $node.text($(this).val());
            });
            $("#linkhref").bind('keyup change', function() {
                var $node = $("#editLink").data('node');
                $node.and('#linkpreview').attr('href', $(this).val());
            });
        });
    </script>
</head>
<body data-ajax="false" contenteditable="true" id="myEditable">
    <div data-role="page">
        <div data-role="header">
             <h1>Page1</h1>

        </div>
        <div data-role="content">
            <ul...

CSS

a[contenteditable="true"] {
    background-color: #eeeeee;
}
*[contenteditable="true"] {
    background-color: red;
    cursor: text;
}

JavaScript

var editable = false;
var editables = $('span[class*=ui-btn-text]', 'a');

function toggleEditable() {
    console.log("toggleEditable called...");
    editable = !editable;
    editables.attr('contentEditable', editable);
}
function anchorDetector(e) {
    console.log("anchorDetector...");
    var $node = $(getSelectionStartNode());
    console.log($node);
    if ($node.is('a')) {
        $("#editLink").css({
                        top: $node.offset().top - $('#editLink').height() - 5,
                        left: $node.offset().left
                    }).show().data('node', $node);
                    $("#linktext").val($node.text());
                    $("#linkhref").val($node.attr('href'));
                    $("#linkpreview").attr('href', $node.attr('href'));
                } else {
                    $("#editLink").hide();
                }
}
$("#edit").on('click', function () {
    console.log("click...");
    toggleEditable();
});
editables.on('click', anchorDetector);