Question

我想通过单击选择文本后出现的按钮来修改所选文本。在第一次迭代它工作正常 - 根据需要替换文本。在第二次迭代中，似乎文本是从前一次迭代中保留的（模式未更新）并且没有任何作用。你能帮忙解决一下吗？演示如下。

我尝试live('click', function ...)代替click()来根据这里的一些线程更新模式，但似乎无效。

修改

决定包含整个演示，以便更清晰：

<html>

<head>

<title>Border revision</title>

</head>

<body>

<BR />

<h2>Select text in the red square and then click ? button. First time work, second not. Why? </h2>

<div>

some text <span style="border: solid 2px red" class="VAL">try it</span>  some text
second attempt <span style="border: solid 2px red" class="VAL">3</span> doesn't work ;(

<hr><br>

</div>

<hr></br>

<div id="selection-image"></div>

<style type="text/css">

    #show-bubb { background:url(bubble.png) 0 0 no-repeat; width:25px; height:29px; position:absolute; top:-50px; left:-50px; }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>


<script>
function getSelected() {

    if(window.getSelection) { return window.getSelection(); }

    else if(document.getSelection) { return document.getSelection(); }

    else {
        var selection = document.selection.createRange();
        if(selection.text) { return selection.text; }
        return false;
    }
    return false;
}

function processing() {

    var selectionImage;

    $(document).mouseup(function(e) {

        var selection = getSelected();
        var parent = selection.anchorNode.parentNode;

        if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

            if(!selectionImage) {
                selectionImage = $('<label>').attr({
                    //~ href: url,
                    title: 'Click here to remove border',
                    //~ target: '_blank',
                    id: 'show-bubb'
            }).hide();

            $(document.body).append(selectionImage);
            }

            selectionImage.css({
                top: e.pageY - 30, //offsets
                left: e.pageX - 13 //offsets
            }).fadeIn();

            selectionImage.click(function() {       
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }


            });
        };

    });

$(document.body).mousedown(function() {

    if(selectionImage) { selectionImage.fadeOut(); }

});

};




$(document).ready(function() {

processing();

});




</script>

有什么想法吗？

Answer 1

首次使用mouseup后，您将创建selectionImage HTMLElement，它只有一次点击事件。
点击selectionImage，使用parent = first label调用click事件并删除第一个标签。
第二次鼠标添加后，您将创建另一个绑定到selectionImage的点击事件。
单击第一步中创建的selectionImage调用第一次单击事件，父项不存在（第一步标签已删除），因此它没有值'parentNode'。处理停止。

主要问题是您在文档上的每个鼠标上创建新的单击事件。这些点击事件具有不同的父项并按顺序执行。

Answer 2

单击事件，vars通过jquery方法data（）

传递给selectionImage

$(document).mouseup(function(e) {

    var selection = getSelected();
    var parent = selection.anchorNode.parentNode;

    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

        if(!selectionImage) {
            selectionImage = $('<label>').attr({
                //~ href: url,
                title: 'Click here to remove border',
                //~ target: '_blank',
                id: 'show-bubb'
            }).text('test').click(function() {
                var parent = $(this).data('parent');
                var selection = $(this).data('selection');
                //parent = selection.anchorNode.parentNode;         
                if (parent == null) {
                    //alert(ZOZO);
                    return "";
                }
                else {      
                    //create a string selected  
                    var text = document.createTextNode(String(selection));
                    //~ alert("before");
                    //alert(String(selection));
                    parent.parentNode.insertBefore(text, parent.nextSibling);
                    parent.parentNode.removeChild(parent);  
                    //~ alert("after");             
                }
            }).hide();

        $(document.body).append(selectionImage);
        }

        selectionImage.css({
            top: e.pageY - 30, //offsets
            left: e.pageX - 13 //offsets
        }).fadeIn();
        selectionImage.data({
            selection: selection,
            parent: parent
        });
    };

});

使用jQuery添加的onclick处理程序在首次使用后不起作用

2 个答案: